学习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)
    })
}