nodejs基于WS模块实现WebSocket聊天功能(websocket)
生活随笔
收集整理的這篇文章主要介紹了
nodejs基于WS模块实现WebSocket聊天功能(websocket)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文主要介紹了nodejs基于WS模塊實現WebSocket聊天功能的方法,結合實例形式分析了nodejs使用WS模塊進行WebSocket通信實現聊天功能的具體操作技巧,需要的朋友可以參考下，希望能幫助到大家。
WebSocket 模塊眾多，我選擇了一個較為簡單的模塊 進行了實現。
工具：Sublime
技術：Node.js 引用模塊 ws
最終效果如下
本來打算制作網絡畫板，因為工作忘記了，這里就簡單實現了 群聊功能
沒什么好介紹的，網上代碼案例太多了，（各位新手主要碰見的問題，可能也就是 node 導入模塊問題了）
介紹一下安裝模塊：
找到安裝node 目錄，進入到 npm 目錄下 運行 cmd 輸入
npm install --save ws
登錄后復制
源文件呢，最好放在 npm 目錄下，就可以引用到了（我也是新手各位見諒）
然后執行 node 源文件.js 就可以訪問了呢；
源碼：保存 成js 文件就可以了
//https://github.com/websockets/ws/blob/master/doc/ws.md#new-wsserveroptions-callback
var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({
port: 3000, //監聽接口
verifyClient: socketVerify //可選，驗證連接函數
});
function socketVerify(info) {
console.log(info.origin);
console.log(info.req.t);
console.log(info.secure);
// console.log(info.origin);
// var origin = info.origin.match(/^(:?.+\:\/\/)([^\/]+)/);
//if (origin.length >= 3 && origin[2] == "blog.luojia.me") {
// return true; //如果是來自blog.luojia.me的連接，就接受
//}
// console.log("連接",origin[2]);
return true; //否則拒絕
//傳入的info參數會包括這個連接的很多信息，你可以在此處使用console.log(info)來查看和選擇如何驗證連接
}
//廣播
wss.broadcast = function broadcast(s,ws) {
// console.log(ws);
// debugger;
wss.clients.forEach(function each(client) {
// if (typeof client.user != "undefined") {
if(s == 1){
client.send(ws.name + ":" + ws.msg);
}
if(s == 0){
client.send(ws + "退出聊天室");
}
// }
});
};
// 初始化
wss.on('connection', function(ws) {
// console.log(ws.clients.session);
// console.log("在線人數", wss.clients.length);
ws.send('你是第' + wss.clients.length + '位');
// 發送消息
ws.on('message', function(jsonStr,flags) {
var obj = eval('(' + jsonStr + ')');
// console.log(obj);
this.user = obj;
if (typeof this.user.msg != "undefined") {
wss.broadcast(1,obj);
}
});
// 退出聊天
ws.on('close', function(close) {
try{
wss.broadcast(0,this.user.name);
}catch(e){
console.log('刷新頁面了');
}
});
});
登錄后復制
html 前端源碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>聊天</title>
<link rel="stylesheet" href="">
<script language="JavaScript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script type="text/javascript">
</script>
</head>
<style type="text/css" media="screen">
p {
border: 1px solid #cccccc;
width: 500px;
min-height: 100px;
}
</style>
<body>
<p id="show">
</p>
<input type="text" id="message" name="" value="" placeholder="">
<input type="text" id="name" value="" placeholder="昵稱;">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="send()">發送</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" onclick="exit()">退出</a>
<!-- <input type="text" id="token" name="" value="" placeholder="" readonly="false"> -->
</body>
<script type="text/javascript">
var ws = new WebSocket("ws://127.0.0.1:3000?t=test");
ws.onopen = function() {
console.log("連接狀態", ws);
$("#show").html("連接狀態;" + ws.readyState + "</br>");
console.log("open");
ws.open("start");
};
ws.onmessage = function(evt) {
// console.log(evt.data)
// alert(evt.data);
$("#show").append(evt.data + "</br>");
};
ws.onclose = function(evt) {
console.log("WebSocketClosed!");
console.log(evt);
};
ws.onerror = function(evt) {
console.log("WebSocketError!");
};
function send() {
var msg = $("#message").val();
var key = $("#token").val();
var name = $("#name").val();
var str = "{name:'" + name + "',msg:'" + msg + "',key:'" + key + "'}";
console.log("發送", str);
ws.send(str);
};
function exit() {
var r = ws.close();
console.log("退出", r);
}
</script>
</html>
登錄后復制
聊天中沒有做太多驗證，名字可以隨意改動，
相關推薦：
js原聲實現簡單的微信聊天功能
node.js + socket.io 實現聊天功能詳解
如何用nodejs實現聊天功能
以上就是nodejs基于WS模塊實現WebSocket聊天功能的詳細內容，更多請關注風君子博客其它相關文章！
總結
以上是生活随笔為你收集整理的nodejs基于WS模块实现WebSocket聊天功能(websocket)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python多版本共存 ubuntu_L
- 下一篇： 末日生存游戏 《大灾变：黑暗之日》上架