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

  

 

posted @ 2018-06-26 20:18  寻觅beyond  阅读(628)  评论(0编辑  收藏  举报
返回顶部