Express Websocket使用

本文主要介绍express+websocket的使用

WebSocket

WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
其他特点包括：
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

ws://example.com:80/some/path

Express+WebSocket实现

依赖库：express-ws

1. 创建一个express project

通过express直接创建一个express template工程，或者通过express-ts-template创建一个express typescript工程，以下主要介绍在express-ts-template中的使用。
在package.json文件中，添加对express-ws和@types/express-ws的依赖

"devDependencies": {
    "typescript": "^2.3.4",
    "@types/node": "^7.0.22",
    "@types/express": "^4.0.35",
    "@types/body-parser": "~1.16.3",
    "@types/cookie-parser": "~1.3.30",
    "@types/debug": "~0.0.29",
    "@types/morgan": "~1.7.22",
    "@types/serve-favicon": "~2.2.28",
    "@types/jade": "~0.0.30",
    "@types/ws":"3.0.0"
  },
  "dependencies": {
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "express": "~4.14.0",
    "jade": "~1.11.0",
    "morgan": "~1.7.0",
    "serve-favicon": "~2.3.0",
    "express-ws": "~3.0.0"
  },

2. 创建wsRouter

在routers目录创建一个wsRouter.ts文件，用于定义ws的router。 在内部定义了WSRouter类，并使用单例模式通过init方法创建，保证ws只初始化一次。如下：

/**
 * WebSocket router
 */
import * as express from 'express';
import * as expressWS from 'express-ws';

var wsRouter = null;

class WSRouter {
    public server = null;
    public app :express.Express = null;

    public clients = [];

    constructor(server) {
        this.server = server;
        this.app = express();
        expressWS(this.app, this.server);
    }
    /**
     * 接受client端连接
     */
    public lintenClientConnect() {
        var me = this;

        this.app.ws('/', function(ws, req) {
            console.log("client connect to server successful!");
            me.clients.push(ws);
            ws.on('message', function(msg) {
                console.log("receive client msg :", msg);
                me.receiveCmd(msg);
            });
            ws.on("close", function(msg){
                console.log("client is closed");
                for(var index = 0; index < me.clients.length; index++){
                    if(me.clients[index] == this){
                        me.clients.splice(index, 1)
                    }
                }
            });
        });
    }
    /**
     * 发送command到client端
     * @param msg 
     * @param cb 
     */
    public sendCmd(msg:string, cb){

    }

    /**
     * 接收client的command请求
     * @param cmd 
     */
    public receiveCmd(cmd){

    }
} 

export function init(server?:any){
    if(wsRouter == null && server != null){
        wsRouter = new WSRouter(server);
    }
    return wsRouter;
}

3. 引用wsRouter

在bin/www中添加对wsRouter的引用，并初始化

.....
var server = http.createServer(app);
/**
 * create ws server
 */
const WSRouter = require('./../dist/routes/wsRouter.js');
var wsRouter = WSRouter.init(server);
wsRouter.lintenClientConnect();
.....

测试

1. 在project目录执行npm start 启动server

Paste_Image.png

2. 在chrome的F12 consle中输入连接：

var ws = new WebSocket("ws://127.0.0.1:3000");

ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  ws.send("Hello WebSockets!");
};

ws.onmessage = function(evt) {
  console.log( "Received Message: " + evt.data);
  ws.close();
};

ws.onclose = function(evt) {
  console.log("Connection closed.");
};

3. 结果查看

chrome中信息

Paste_Image.png

npm控制台信息

Paste_Image.png

测试通过
测试源码：express-ws-example