学习WebSocket

时间:2023-06-22 15:25:08

初识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/这个地址。

  学习WebSocket

使用自己搭建的服务器

  前面一个代码中使用的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进行操作了。

  学习WebSocket

有点问题

  上面这个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)
})
}