基本上弄完前兩節(jié)，沒有經過備案的童鞋就沒辦法往下走了课蔬，接下來這幾節(jié)囱稽，基本就是從開發(fā)者實驗室的教學視頻中總結摘抄過來的，留作以后參考吧二跋。
- WebSocket協(xié)議是基于TCP的一種新的應用層網絡協(xié)議战惊。它實現(xiàn)了瀏覽器與服務器全雙工(full-duplex)通信——允許服務器主動發(fā)送信息給客戶端。
-
有別于HTTP協(xié)議扎即，HTTP協(xié)議只能實現(xiàn)單工通信吞获，在這里盜一張阮大神的圖
HTTP vs WebSocket - 詳細的可以看阮一峰大神的博客：WebSocket 教程
- WebSocket實現(xiàn)了服務器也能主動向瀏覽器推動消息，這就使得小程序的制作更加的容易谚鄙。
Step1 安裝ws模塊
使用npm安裝ws模塊衫哥，來讓服務器支持WebSocket協(xié)議
cd /data/release/webapp
sudo apt-get install npm -y
sudo npm install --save ws
Step2 實現(xiàn)WebSocket 服務器
創(chuàng)建 websocket.js 文件
cd /data/release/webapp
sudo touch websocket.js
sudo chmod a+rw websocket.js
修改 websocket.js 文件
// 引入 ws 支持 WebSocket 的實現(xiàn)
const ws = require('ws');
// 導出處理方法
exports.listen = listen;
/**
* 在 HTTP Server 上處理 WebSocket 請求
* @param {http.Server} server
* @param {wafer.SessionMiddleware} sessionMiddleware
*/
function listen(server, sessionMiddleware) {
// 使用 HTTP Server 創(chuàng)建 WebSocket 服務，使用 path 參數(shù)指定需要升級為 WebSocket 的路徑
const wss = new ws.Server({ server, path: '/ws' });
// 監(jiān)聽 WebSocket 連接建立
wss.on('connection', (ws,request) => {// 要升級到 WebSocket 協(xié)議的 HTTP 連接
// 被升級到 WebSocket 的請求不會被 express 處理襟锐，
// 需要使用會話中間節(jié)獲取會話
sessionMiddleware(request, null, () => {
const session = request.session;
if (!session) {
// 沒有獲取到會話撤逢，強制斷開 WebSocket 連接
ws.send(JSON.stringify(request.sessionError) || "No session avaliable");
ws.close();
return;
}
// 保留這個日志的輸出可讓實驗室能檢查到當前步驟是否完成
console.log(`WebSocket client connected with openId=${session.userInfo.openId}`);
serveMessage(ws, session.userInfo);
});
});
// 監(jiān)聽 WebSocket 服務的錯誤
wss.on('error', (err) => {
console.log(err);
});
}
/**
* 進行簡單的 WebSocket 服務，對于客戶端發(fā)來的所有消息都回復回去
*/
function serveMessage(ws, userInfo) {
// 監(jiān)聽客戶端發(fā)來的消息
ws.on('message', (message) => {
console.log(`WebSocket received: ${message}`);
ws.send(`Server: Received(${message})`);
});
// 監(jiān)聽關閉事件
ws.on('close', (code, message) => {
console.log(`WebSocket client closed (code: ${code}, message: ${message || 'none'})`);
});
// 連接后馬上發(fā)送 hello 消息給會話對應的用戶
ws.send(`Server: 恭喜，${userInfo.nickName}`);
}
重新編輯app.js蚊荣，調用websocket服務
// HTTP 模塊同時支持 Express 和 WebSocket
const http = require('http');
// 引用 express 來支持 HTTP Server 的實現(xiàn)
const express = require('express');
// 引用 wafer-session 支持小程序會話
const waferSession = require('wafer-node-session');
// 使用 MongoDB 作為會話的存儲
const MongoStore = require('connect-mongo')(waferSession);
// 引入配置文件
const config = require('./config');
// 引入 WebSocket 服務實現(xiàn)
const websocket = require('./websocket');
// 創(chuàng)建一個 express 實例
const app = express();
// 獨立出會話中間件給 express 和 ws 使用
const sessionMiddleware = waferSession({
appId: config.appId,
appSecret: config.appSecret,
loginPath: '/login',
store: new MongoStore({
url: `mongodb://${config.mongoUser}:${config.mongoPass}@${config.mongoHost}:${config.mongoPort}/${config.mongoDb}`
})
});
app.use(sessionMiddleware);
// 在路由 /me 下初狰，輸出會話里包含的用戶信息
app.use('/me', (request, response, next) => {
response.json(request.session ? request.session.userInfo : { noBody: true });
if (request.session) {
console.log(`Wafer session success with openId=${request.session.userInfo.openId}`);
}
});
// 實現(xiàn)一個中間件，對于未處理的請求互例，都輸出 "Response from express"
app.use((request, response, next) => {
response.write('Response from express');
response.end();
});
// 創(chuàng)建 HTTP Server 而不是直接使用 express 監(jiān)聽
const server = http.createServer(app);
// 讓 WebSocket 服務在創(chuàng)建的 HTTP 服務器上監(jiān)聽
websocket.listen(server, sessionMiddleware);
// 啟動 HTTP 服務
server.listen(config.serverPort);
// 輸出服務器啟動日志
console.log(`Server listening at http://127.0.0.1:${config.serverPort}`);
保存文件后奢入，重啟服務
pm2 restart app
Step3 更新 Nginx 代理使其支持WebSocket
- 編輯 Nginx 配置 ssl.conf，添加 WebSocket 支持媳叨，可參考下面的配置(注：請將參考配置文件中的
www.example.com替換為前面步驟申請的域名腥光，將1_www.example.com_bundle.crt和2_www.example.com.key替換為前面步驟申請并上傳的 SSL 證書的名稱)：
修改/etc/nginx/conf.d/ssl.conf
# WebSocket 配置
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 443;
server_name www.example.com; # 改為綁定證書的域名
# ssl 配置
ssl on;
ssl_certificate 1_www.example.com_bundle.crt; # 改為自己申請得到的 crt 文件的名稱
ssl_certificate_key 2_www.example.com.key; # 改為自己申請得到的 key 文件的名稱
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
ssl_prefer_server_ciphers on;
# WebSocket 配置
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
location / {
proxy_pass http://127.0.0.1:8765;
}
}
保存后，通知nginx重新加載進程
sudo nginx -s reload
Step4 在小程序開發(fā)工具里測試 WebSocket
-
打開配套的小程序糊秆，點擊 實驗三：WebSocket武福。進入測試頁面后，點擊 連接 按鈕痘番，如果出現(xiàn)連接成功的提示捉片，表示 WebSocket 服務已經正常運行，可以收發(fā)消息汞舱。
image.png
