前端页面与Nodejs使用websocket通信

不要用浏览去直接去访问websocket的地址！！！

太傻了。。。

就是页面和服务端有个隐藏的通信而已。

前端

1、实例化一个ws对象

var wsUri ="ws://echo.websocket.org/";
websocket = new WebSocket(wsUri);

2、WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror,都是事件触发，不会阻塞

//成功连接后
websocket.onopen = function(evt) {};

//连接失败
websocket.onerror = function(evt) { };

//收到信息后
websocket.onmessage = function(evt) { };

//后端关闭ws的时候
websocket.onclose = function(evt) { };

后端

minicap例程里面是用的ws模块

注意，ws的所有操作，都要在connection的回调里面执行

一个例子

后端每隔1.5s给前端发count++；

前端收到后打印出来并返给后端收到了什么

收到了

服务器代码

ws_base.js

只需要启动ws就可以了，不需要绑定服务器

//获取websocket模块
const websocket = require('ws').Server;

const wsServer = new websocket({port:8081});

//与wsServer相关的操作，都必须在connection函数里面操作
//连接成功后会返回一个ws
wsServer.on('connection',(ws)=>{

    let count = 0;

    ws.on('message',(message)=>{
        console.log(message);
    });

    setInterval(()=>{
        ws.send(count++);
    },1500)

});

前端代码：

ws_front.html

<html>
<head>
    <title>Ws Demo</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>

<body>

    <div>
        <h1 id="show"></h1>
    </div>


    <script>
    
        const ws = new WebSocket('ws://localhost:8081');

        ws.onopen = ()=>{console.log('connect success!');}

        ws.onmessage = (message)=>{
            console.log(message);
            ws.send('收到'+message.data);
        }
            
        
    
    </script>

</body>


</html>