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

时间:2022-06-21 07:07:24

简述如何使用node+express实现接口连接及入门websocket通讯。使用技术栈:node + express + typescript + websocket。

1、接口实现

这里描述前端如何模拟实现接口请求,使用的是express(基于node实现的可以快速搭建web应用的开发框架),这里使用node+express搭建一个简单的web服务器。

初始化

1) 初始化生成一个新的 package.json 文件

npm init -y //-y(代表yes),跳过提问阶段,直接生成文件。

2)安装需要使用的npm包:nodeexpressws(即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

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

地址访问

访问 http://localhost:8001/datas

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

访问 http://localhost:8001/datas/1

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

接口实现!

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通讯的更多相关文章

  1. 前端必备之Node&plus;mysql&plus;ejs模版如何写接口

    前端必备之Node+mysql+ejs模版如何写接口 这星期公司要做一个视频的后台管理系统, 让我用Node+mysql+ejs配合写接口, 周末在家研究了一下, 趁还没来具体需求把研究内容在这里分享 ...

  2. express搭建后端请求路由,前端进行访问对应的接口 后端解决跨域

    代码在 ==>E:\nodes实战\myserve\testserve 1 express搭建后端请求路由,前端进行访问对应的接口 1) 创建项目目录 express 项目名 -e 然后按照提示 ...

  3. 零基础学习前端1-1配置node及npm环境变量

    零基础学习前端1-1配置node及npm环境变量 ## 1-1配置node及npm环境变量 首先:下载node 可以直接去官方网站下载 1.首先从官网下载安装包 https://nodejs.org/ ...

  4. 小白从零开始阿里云部署react项目&plus;node服务接口(二:node服务&plus;web)

    我们用极简的方式来创建服务,没有任何附加功能 1 新建一个server文件夹 2 使用npm init 或者yarn init  一路enter 3  yarn add  express cors  ...

  5. 【vue】生成接口模拟数据

    目录 方案一:自定义模拟数据 Step1 创建json文件 Step2 在 vue.config.js 中配置 Step3 在组件中使用 (方式一) Step3 封装api (方式二) Step4 在 ...

  6. Javascript 接口模拟

    Javascript接口模拟可以通过三种方式实现文档手段(注释).辅助类和鸭式辨. 第一种和第二种只形式上体现没有真正的实现. 鸭式辨实现原理是:"只要能像鸭子一样叫和走就是鸭子" ...

  7. ajax请求node&period;js接口时出现 No &&num;39&semi;Access-Control-Allow-Origin&&num;39&semi; header is present on the requested resource错误

    ajax请求node.js接口出现了如下的错误: XMLHttpRequest cannot load http://xxx.xxx.xx.xx:8888/getTem?cityId=110105&a ...

  8. 【转】SoapUI5&period;0创建WebService接口模拟服务端

    原文:http://blog.csdn.net/a19881029/article/details/26348627 使用SoapUI创建WebService接口模拟服务端需要接口描述文件 MathU ...

  9. Effective Java 第三版——38&period; 使用接口模拟可扩展的枚举

    Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...

随机推荐

  1. js判断手指滑动方向(移动端)

    var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...

  2. css expression

    概述 css expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物,以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作 ...

  3. MYSQL死锁

    转载时请以超链接形式标明文章原始出处和作者信息及本声明http://www.blogbus.com/ri0day-logs/59186177.html mysql使用myisam的时候锁表比较多,尤其 ...

  4. Json解析要点

    解析Json时,昨天遇到了新的问题,之前都是解析的数组,不是数组的用类来做. 这是Json串; {"status":"00001","ver&quot ...

  5. BSA Network Shell系列-通过NSH执行Powershell&comma;VBScript或bat files脚本

    参考:Running Powershell, VBScript, or bat files via NSH 如果你直接在NSH命令行执行的话,可以参考我翻译的下面的东东,如果想运行NSH 脚本作业的话 ...

  6. Redis数据结构之robj

    本文及后续文章,Redis版本均是v3.2.8 我们知道一个database内的这个映射关系是用一个dict来维护的.dict的key固定用一种数据结构来表达,这这数据结构就是动态字符串sds.而va ...

  7. Python介绍及环境配置

    Python 简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有 ...

  8. 让我对 docker swarm mode 的基本原理豁然开朗的几篇英文博文

    关于 docker swarm mode 的基本架构 How does it work? Docker! Part 1: Swarm general architecture 关于 Overlay N ...

  9. web前端html快速入门

    HTML 学前端之间不得不知道一个网站:http://www.w3school.com.cn/ 网上有很多教程关于前端的,写的特别详细,也写的特别好.我们应该要自已理解,一些相应的前端的知识,不能只是 ...

  10. 行高 line-height

    一.行高的定义 line-height(行高):两行文字基线之间的距离 1.什么是基线? 2.为何是基线? 3.需要两行吗? 1.什么是基线? 我们上学的时候都用过,抄写英文字母的时候.其中有一条红线 ...