NodeJs WS 模块实现 WebSocket 聊天

来源：互联网发布：ubuntu安装过程黑屏编辑：程序博客网时间：2024/05/02 01:08

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-callbackvar 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)" onclick="send()">发送</a>    <a href="javascript:void(0)" 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>

聊天中没有做太多验证，名字可以随意改动，

参考

https://github.com/websockets/ws

https://github.com/websockets/ws/blob/master/doc/ws.md

各位哥哥姐姐关注一下呗；

1 0

NodeJs WS 模块 实现 WebSocket 聊天

NodeJs WS 模块实现 WebSocket 聊天