前端使用express+node實現接口模擬及websocket通信

簡述如何使用node+express實現接口鏈接及入門websocket通信。使用技術棧：node + express + typescript + websocket。

一、接口實現

這裏描述前端如何模擬實現接口請求，使用的是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

接口實現！

二、websocket概念

概念

WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議。

問世

• http請求：必須是由客戶端發出請求，服務器返回查詢結果。http協議作不到服務器主動向客戶端推送消息。
• websocket請求：服務器能夠主動向客戶端推送消息，客戶端也能夠主動向服務器發送消息。協議標識符是ws（若是加密，則爲wss）。所以，它能夠解決 HTTP 協議沒法實現服務器主動向客戶端發起消息的問題。

【舉例】：好比咱們須要定時的獲取即時消息數，若是使用http請求，就必須輪詢，不停的建立http請求，資源浪費嚴重，此時可使用websocket來解決問題，使通訊更加高效。

三、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)

四、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斷開鏈接')
    }
  }

即時通信成功！