前端使用express+node实现接口模拟及websocket通讯

简述如何使用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断开连接')

    }

  }

即时通讯成功！

前端使用express+node实现接口模拟及websocket通讯的相关教程结束。