本文实例讲述了nodejs基于WS模块实现WebSocket聊天功能的方法。分享给大家供大家参考,具体如下:
WebSocket模块众多,我选择了一个较为简单的模块进行了实现。
工具:崇高
技术:节点。js引用模块ws
最终效果如下
本来打算制作网络画板,因为工作忘记了,这里就简单实现了群聊功能
没什么好介绍的,网上代码案例太多了,(各位新手主要碰见的问题,可能也就是节点导入模块问题了)
介绍一下安装模块:
找到安装节点目录,进入到npm目录下,运行cmd输入
npm安装,节省ws
之前
源文件呢,最好放在npm目录下,就可以引用到了(我也是新手各位见谅)
然后执行节点源文件。js就可以访问了呢。
源码:保存成js文件就可以了
//https://github.com/websockets/ws/blob/master/doc/ws.md new-wsserveroptions-callback
var WebSocketServer=要求(ws) .Server,
wss=new WebSocketServer ({
端口:3000//监听接口
verifyClient: socketVerify//可选,验证连接函数
});
函数socketVerify(信息){
console.log (info.origin);
console.log (info.req.t);
console.log (info.secure);//console.log (info.origin);//var=info.origin.match起源(/^ (& # 63;。+ \:\/\/)([/^ \]+)/);//如果(起源。长度在=3,,起源[2]==癰log.luojia.me”) {//返回true;//如果是来自blog.luojia.me的连接,就接受//}//console.log(“连接”,起源[2]);
返回true;//否则拒绝//传入的信息参数会包括这个连接的很多信息,你可以在此处使用console.log(信息)来查看和选择如何验证连接
}//广播
wss。广播=function广播(年代,ws) {//console.log (ws);//调试器;
wss.clients。forEach(功能(客户端){//如果(typeof客户机。用户!=岸ㄒ濉?{
如果(s==1) {
client.send (ws.name +“:”+ ws.msg);
}
如果(s==0) {
客户端。发送(ws +”退出聊天室”);
}//}
});
};//初始化
wss。(“连接”,函数(ws) {//console.log (ws.clients.session);//控制台。日志(“在线人数”,wss.clients.length);
ws。发送(“你是第' + wss.clients。长度+“位”);//发送消息
ws。(“消息”,函数(jsonStr,旗帜){
var obj=eval (' (' + jsonStr + ') ');//console.log (obj);
这一点。用户=obj;
如果(typeof this.user。味精!=岸ㄒ濉?{
wss.broadcast (obj);
}
});//退出聊天
ws。(“关闭”,函数(关闭){
尝试{
wss.broadcast (0, this.user.name);
}捕捉(e) {
console.log(“刷新页面了');
}
});
});
之前
html前端源码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘”比;
& lt; title>聊天& lt;/title>
& lt;链接rel="样式表" href="比;
& lt;脚本语言=" JavaScript " src=" http://code.jquery.com/jquery-1.11.0.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
& lt;/script>
& lt;/head>
& lt;风格type=" text/css "媒体=捌聊弧北?
div {
边界:1 px固体# cccccc;
宽度:500 px;
最小高度:100 px;
}
& lt;/style>
& lt; body>
& lt; div id=靶恪痹?
& lt;/div>
& lt;输入类型="文本" id=跋ⅰ眓ame=" value="占位符=薄氨?
& lt;输入类型="文本" id=懊帧奔壑?"占位符=瓣浅?“在
& lt; a href=" javascript:无效(0)”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在发送& lt;/a>
& lt; a href=" javascript:无效(0)”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞退出& lt;/a>
& lt; !——& lt;输入类型="文本" id=傲钆啤眓ame=" value="占位符=薄皉eadonly=癴alse”比;——比;
& lt;/body>
& lt;脚本type=" text/javascript祝辞
var ws=new WebSocket (ws://127.0.0.1:3000& # 63; t=测试”);
ws。onopen=function () {
控制台。日志(“连接状态”,ws);
$(" #秀”). html(“连接状态;”+ ws。readyState +“& lt;/br>”);
console.log(“开放”);
ws.open(“开始”);
};
ws。onmessage函数=(evt) {//console.log (evt.data)//警报(evt.data);
$(" #秀”.append (evt)。数据+“& lt;/br>”);
};
ws。onclose=function (evt) {
console.log (“WebSocketClosed !”);
console.log (evt);
};
ws。onerror=function (evt) {
console.log (“WebSocketError !”);
};
函数发送(){
var味精=$(" #消息”).val ();
var关键=$(" #令牌”).val ();
var的名字=$(" #名称”).val ();
var str="{名称:“+名字+”,味精:“+味精+”,关键:”“+键+”“}”;
控制台。日志(“发送”,str);
ws.send (str);
};
函数退出(){
var r=ws.close ();
控制台。日志(“退出”,r);
}
& lt;/script>
& lt;/html>
