本文主要介绍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
