簡述如何使用node+express實現接口連接及入門websocket通訊。使用技術棧：node + express + typescript + websocket。
1、接口實現
這里描述前端如何模擬實現接口請求，使用的是express（基於node實現的可以快速搭建web應用的開發框架），這里使用node+express搭建一個簡單的web服務器。
初始化
1） 初始化生成一個新的 package.json 文件
npm init -y //-y（代表yes），跳過提問階段，直接生成文件。
2）安裝需要使用的npm包：node， express ，ws(即websocket)
npm install node express ws --save
3）這里使用ts開發，所以需要安裝ts需要使用的類型定義包（如果使用js就不要安裝了）
npm install @types/node @types/express @types/ws -- save
4）安裝node熱更新依賴包nodemon
npm install nodemon --save
創建web服務器
新建demo-server.ts文件
1）數據模擬
// demo-server.ts
export class Demodata {
constructor(
public id: number,
public name: string,
public desc: string) { }
}
const datas: Array<Demodata> = [
new Demodata(1, 'heimayu', 'this is my bolg name'),
new Demodata(2, 'websocket', 'this chapter is introduce websocket'),
new Demodata(3, 'express', 'you can use express to start webapp')
]
2）使用express快速搭建web服務器
// demo-server.ts
import * as express from 'express';
const app = express();
// 啟動服務器
app.listen(8001,'localhost',_=>{
console.log('demo服務器已啟動，訪問地址http://localhost:8001')
})
模擬接口請求
// 接口請求-獲取數據
app.get('/datas', (req, res) => {
res.send(datas) //數據發送
})
// 接口請求-根據id獲取數據
app.get('/datas/:id', (req, res) => {
let url_id: number = req.params.id;
let data: Demodata = datas.find(item => {
return item.id == url_id
});
res.send(data);
})
將ts文件轉換成js文件后啟動熱更新命令 nodemon build/demo-server.js
地址訪問
訪問 http://localhost:8001/datas
訪問 http://localhost:8001/datas/1
接口實現！
2、websocket概念
概念
WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
問世
- http請求：必須是由客戶端發出請求，服務器返回查詢結果。http協議做不到服務器主動向客戶端推送消息。
- websocket請求：服務器可以主動向客戶端推送消息，客戶端也可以主動向服務器發送消息。協議標識符是ws（如果加密，則為wss）。因此，它可以解決 HTTP 協議無法實現服務器主動向客戶端發起消息的問題。
【舉例】：比如我們需要定時的獲取即時消息數，如果使用http請求，就必須輪詢，不停的創建http請求，資源浪費嚴重，此時可以使用websocket來解決問題，使通信更加高效。
3、websocket服務端
node實現websocket有很多模塊可實現，這里使用的是ws模塊
安裝ws
npm install ws --save
服務端使用ws
import { Server } from 'ws';
// 定義websocket服務器
const wsServer = new Server({ port: 8085 });
// 定義連接到的websocket集合
let socketSet = new Set<any>();
// 連接
wsServer.on('connection', websocket => {
socketSet.add(websocket)
});
// 初始化消息數
let message = 0;
// 定時2s發送消息
setInterval(() => {
socketSet.forEach(ws => {
if (ws.readyState == 1) {
ws.send(JSON.stringify({
message: message++
}))
} else {
socketSet.delete(ws);
}
})
}, 2000)
4、websocket客戶端
websocket對象
/**
* url:連接的url
* protocol:可選，接受的子協議
**/
var ws = new WebSocket(url,[protocol])
websocket屬性
ws.readyState
- 0：表示連接尚未建立
- 1：已建立，可以通信
- 2：連接正在關閉
- 3：連接已經關閉
websocket事件
| 事件 | 描述 |
|---|---|
| open | 連接建立時觸發 |
| message | 客戶端接收服務端數據時觸發 |
| error | 通信發生錯誤 |
| close | 連接關閉時觸發 |
websocket方法
| 方法 | 描述 |
|---|---|
| send() | 使用連接發送數據 |
| close() | 關閉連接 |
客戶端使用ws
// angular代碼
message: number = 0; // 消息數
ws: WebSocket; // 定義
ngOnInit() { // 初始化
this.ws = new WebSocket('ws://localhost:8085');
// 客戶端接收消息
this.ws.onmessage = (event) =>{
this.message = JSON.parse(event.data).message;
}
// 出錯
this.ws.onerror = (error) =>{
console.log(error);
}
// 關閉
this.ws.onclose = ()=>{
console.log('webSocket斷開連接')
}
}
即時通訊成功！