nodejs基于WS模块实现WebSocket聊天功能的方法
程序员文章站
2022-04-29 12:01:11
本文实例讲述了nodejs基于ws模块实现websocket聊天功能的方法。分享给大家供大家参考,具体如下:
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"> div { border: 1px solid #cccccc; width: 500px; min-height: 100px; } </style> <body> <div id="show"> </div> <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>
聊天中没有做太多验证,名字可以随意改动,
参考
希望本文所述对大家nodejs程序设计有所帮助。
下一篇: 浅谈vuex 闲置状态重置方案
推荐阅读
-
基于django channel实现websocket的聊天室的方法示例
-
php+html5基于websocket实现聊天室的方法
-
php+html5基于websocket实现聊天室的方法_PHP
-
nodejs基于WS模块实现WebSocket聊天功能
-
php+html5基于websocket实现聊天室的方法
-
php+html5基于websocket实现聊天室的方法,html5websocket_PHP教程
-
基于django channel实现websocket的聊天室的方法示例
-
php+html5基于websocket实现聊天室的方法,html5websocket_PHP教程
-
php+html5基于websocket实现聊天室的方法,html5websocket
-
php+html5基于websocket实现聊天室的方法