實現(xiàn)基于Websocket的消息推送
基于Websocket的消息推送屡立，大概問題可以分解為以下三點：
- 服務器端Websocket設置
- 客戶端Websocket設置
- nginx代理的設置
先說Nginx的設置
所有資料都說在Nginx配置文件中的location下加入以下配置：
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
參考資料：
- nginx配置支持websocket
- websocket+前后端分離+https的nginx配置
- 使用nginx作為websocket的proxy server
- Nginx 作為 WebSockets 代理
再說客戶端設置
首先說發(fā)現(xiàn)的一個好東西捻悯，用TS改寫Express模板，地址在這里。
再說正題，先在package.json中引入要用的Websocket包。
"express-ws": "~3.0.0"
在Express的目錄結(jié)構(gòu)里的bin/www中加入以下代碼：
let server = http.createServer(app);
const WSRouter = require('../routes/ws-router.js');
let wsRouter = WSRouter.init(server);
wsRouter.lintenClientConnect();
顯而易見缨叫，主體部分在ws-router中：
"use strict";
exports.__esModule = true;
var express = require("express");
var expressWS = require("express-ws");
var wsRouter = null;
var WSRouter = (function () {
function WSRouter(server) {
this.server = null;
this.app = null;
this.clients = [];
this.server = server;
this.app = express();
expressWS(this.app, this.server);
}
WSRouter.prototype.lintenClientConnect = function () {
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);
me.sendCmd(msg, 1);
});
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);
}
}
});
});
};
WSRouter.prototype.sendCmd = function (msg, cb) {
for (let cell in this.clients) {
this.clients[cell].send('Hello world!');
}
};
WSRouter.prototype.receiveCmd = function (cmd) {
};
return WSRouter;
}());
function init(server) {
if (wsRouter == null && server != null) {
wsRouter = new WSRouter(server);
}
return wsRouter;
}
function sendMsg(msg){
wsRouter.sendCmd(msg, '');
}
module.exports = {
init: init,
sendMsg: sendMsg
};
在其它要發(fā)消息的地方椭符，調(diào)用以下代碼即可：
const WSRouter = require('./ws-router.js');
WSRouter.sendMsg('From table data');
參考資料
最后說客戶端
客戶端的難點在于找到一個Angular4式語法的包荔燎，調(diào)研來去，只找到一個simple-ng-websocket销钝，還是一個日本人寫的有咨，不情愿地用吧…
在app.module.ts中
import {SimpleNgWebSocket} from 'simple-ng-websocket';
...
providers: [....SimpleNgWebSocket....]
在業(yè)務模塊中：
import {Component, OnInit} from '@angular/core';
import {SimpleNgWebSocket} from 'simple-ng-websocket';
@Component({
selector: 'app-dashboard',
templateUrl: './full-layout.component.html'
})
export class FullLayoutComponent implements OnInit {
public msgCount: any;
public ngws: SimpleNgWebSocket;
constructor() {
this.ngws = new SimpleNgWebSocket('ws://192.168.1.240:80');
this.msgCount = 0;
this.ngws.on('message', (msg) => {
this.msgCount++;
console.log('msg:');
console.log(msg);
});
}
public sendMessage(msg: string): void {
this.ngws.send(msg);
}
public disabled: boolean = false;
public status: { isopen: boolean } = {isopen: false};
public toggled(open: boolean): void {
console.log('Dropdown is now: ', open);
}
public toggleDropdown($event: MouseEvent): void {
$event.preventDefault();
$event.stopPropagation();
this.status.isopen = !this.status.isopen;
}
ngOnInit(): void {
}
}
