zoukankan      html  css  js  c++  java
  • 学习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)
        })
    }
    

      

  • 相关阅读:
    ORACLE查询删除重复记录三种方法
    是否可以从一个static方法内部发出对非static方法的调用
    协程(微线程)
    多线程、多进程
    python3.6.5修改print的颜色
    Python之时间和日期模块
    Python之字符(2)
    Python之字符
    python之列表
    Python中的文件操作
  • 原文地址:https://www.cnblogs.com/-beyond/p/9231050.html
Copyright © 2011-2022 走看看