学习WebSocket
初识WebSocket:
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初识WebSocket</title> </head> <body> <div style="margin-top: 30px;margin-left:30px"> <input type="text" id="info"> <button id="send">send</button> <div id="notice"></div> <div id="msg"></div> </div> </body> <script> var info = document.getElementById("info"); var send= document.getElementById("send"); var notice = document.getElementById("notice"); var msg = document.getElementById("msg"); var ws = new WebSocket("ws://echo.websocket.org/"); ws.onopen = function(){ notice.innerHTML = "connected"; } ws.onclose = function(){ notice.innerHTML = "closed" } ws.onmessage = function(res){ console.log(res); msg.innerHTML = res.data; } send.onclick = function(){ ws.send(info.value) } </script> </html>
这个代码运行之后,在输入框中输入的数据都会原封不动的返回,因为使用的ws://echo.websocket.org/这个地址。
使用自己搭建的服务器
前面一个代码中使用的ws://echo.websocket.org/这个服务器,这里参考大多数教程中的做法,使用node.js来搭建一个websocket服务器。
node.js-websocket模块,参考:https://www.npmjs.com/package/nodejs-websocket
安装node.js-websocket模块:cd path_to_workspance && npm install nodejs-websocket。
上面这个模块中介绍的使用方法,如下:
server.js
var ws = require("nodejs-websocket") var port = 8001; var server = ws.createServer(function (conn) { console.log("New connection"); //收到数据进行的操作 conn.on("text", function (str) { console.log("Received "+str); conn.sendText(str.toUpperCase()+"!!!"); }); //关闭连接进行的操作。 conn.on("close", function (code, reason) { console.log("Connection closed"); }); }); server.listen(port) console.log("websocket started , listening " + port)
使用node server.js来运行搭建的服务器。
然后,将前面第一个index.html中的ws://echo.websocket.org/,替换为ws://localhost:8001即可,然后即可访问index.html进行操作了。
有点问题
上面这个js程序刚开始是可以正常运行的,但是,一旦浏览器进行刷新操作或者关闭了窗口,那么node就会报错,自己搭建的服务器就会崩溃,提示下面的信息:
websocket started , listening 8001 New connection Connection closed events.js:183 throw er; // Unhandled 'error' event ^ Error: read ECONNRESET at _errnoException (util.js:1022:11) at TCP.onread (net.js:628:25)
从上面的信息可以看到出错原因是因为没有为error事件绑定handle函数。
可以看一下这个:event-errorerrobj
解决方法就是稍加修改一下上面的server.js
var ws = require("nodejs-websocket") var port = 8001; var server = ws.createServer(function (conn) { console.log("New connection"); //收到数据进行的操作 conn.on("text", function (str) { console.log("Received "+str); conn.sendText(str.toUpperCase()+"!!!"); }); //关闭连接进行的操作。 conn.on("close", function (code, reason) { console.log("Connection closed"); }); //出现错误进行的操作,比如客户端刷新网页、关闭窗口等 conn.on("error", function(err){ console.log("some accident happend"); console.log(err); }); }); console.log("websocket started , listening " + port) server.listen(port)
重新使用node server.js启动服务器,再次访问index.html,进行刷新或者关闭窗口时,服务器都不会崩溃了,服务器后台输出内容如下:
websocket started , listening 8001 New connection Received demo Connection closed some accident happend { Error: read ECONNRESET at _errnoException (util.js:1022:11) at TCP.onread (net.js:628:25) code: 'ECONNRESET', errno: 'ECONNRESET', syscall: 'read' } New connection Received haha Connection closed some accident happend { Error: read ECONNRESET at _errnoException (util.js:1022:11) at TCP.onread (net.js:628:25) code: 'ECONNRESET', errno: 'ECONNRESET', syscall: 'read' }
发送广播消息
要发送广播,首要问题就是:需要知道所有连接中的客户端。
node.js-websocket模块中有办法获得,详情参考server.connections
function broadcast(server, msg) { server.connections.forEach(function (conn) { conn.sendText(msg) }) }