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

    })

}