基于Node实现WebSocket通信

2019年03月11日Web前端Web后端0

小程序中需要用到webSocket通信,为了方便自己调试,于是弄了个node环境来做测试。

一、客户端

webSocket客户端的使用还是蛮简单的,

var ws = new WebSocket('ws://127.0.0.1:3000');
ws.onopen = function() {
    console.log('open');
}
ws.onmessage = function(data) {
    console.log(data);
}

实例化WebSocket后,为实例绑定事件就可以了,当然还有其他的事件,我这就不列举了,只用open和message了。 下面看下node的代码。

二、socket.io

socket.io听过得比较早,但一直没有机会使用,于是第一个便想到他,npm install下。 增加后端代码,在不妨碍理解的基础上进行了代码删减:

const io = require('socket.io')();

io.on('connection', function(client) {
    console.log('connected');
});
io.listen(3000);

powershell下用node启动该服务,同样的,用http-server工具启动,打开 http://127.0.0.1:8080/ws.html。

发现控制台下报错了,提示Connection closed before receiving a handshake response。

好吧,这儿被卡了好久,后来发现原因是websocket版本的问题,我们看下控制台的network,

发现websocket对应的是13版本,而socket.io支持的版本是4版本,故存在问题。而websocket版本详细可以查看:websocket版本

有问题,怎么处理呢?继续看下一个ws库。

三、ws

ws是一个node的webSocket库,在readme中说明了他是支持13版本的websocket协议的。 直接上代码,启服务,

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });
wss.on('connection', function(ws) {
    console.log('connected');
    ws.on('message', function(message) {
        console.log('received: %s', message);
    });
    ws.send('something');
});

刷新下ws.html,控制台上有打印了,这下可以使用了。

四、总结

讲完了,发现微信下没讲?不,微信下是一样的,微信的websocket也是13版本的,问题和处理方法都是一样的,没用微信的例子是因为想看下普通pc下的效果,发现一致的,就直接拿来当例子了。

demo下载地址:基于node实现websocket通信