简述如何使用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通讯的更多相关文章
-
前端必备之Node+mysql+ejs模版如何写接口
前端必备之Node+mysql+ejs模版如何写接口 这星期公司要做一个视频的后台管理系统, 让我用Node+mysql+ejs配合写接口, 周末在家研究了一下, 趁还没来具体需求把研究内容在这里分享 ...
-
express搭建后端请求路由,前端进行访问对应的接口 后端解决跨域
代码在 ==>E:\nodes实战\myserve\testserve 1 express搭建后端请求路由,前端进行访问对应的接口 1) 创建项目目录 express 项目名 -e 然后按照提示 ...
-
零基础学习前端1-1配置node及npm环境变量
零基础学习前端1-1配置node及npm环境变量 ## 1-1配置node及npm环境变量 首先:下载node 可以直接去官方网站下载 1.首先从官网下载安装包 https://nodejs.org/ ...
-
小白从零开始阿里云部署react项目+node服务接口(二:node服务+web)
我们用极简的方式来创建服务,没有任何附加功能 1 新建一个server文件夹 2 使用npm init 或者yarn init 一路enter 3 yarn add express cors ...
-
【vue】生成接口模拟数据
目录 方案一:自定义模拟数据 Step1 创建json文件 Step2 在 vue.config.js 中配置 Step3 在组件中使用 (方式一) Step3 封装api (方式二) Step4 在 ...
-
Javascript 接口模拟
Javascript接口模拟可以通过三种方式实现文档手段(注释).辅助类和鸭式辨. 第一种和第二种只形式上体现没有真正的实现. 鸭式辨实现原理是:"只要能像鸭子一样叫和走就是鸭子" ...
-
ajax请求node.js接口时出现 No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource错误
ajax请求node.js接口出现了如下的错误: XMLHttpRequest cannot load http://xxx.xxx.xx.xx:8888/getTem?cityId=110105&a ...
-
【转】SoapUI5.0创建WebService接口模拟服务端
原文:http://blog.csdn.net/a19881029/article/details/26348627 使用SoapUI创建WebService接口模拟服务端需要接口描述文件 MathU ...
-
Effective Java 第三版——38. 使用接口模拟可扩展的枚举
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
随机推荐
-
js判断手指滑动方向(移动端)
var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / Mat ...
-
css expression
概述 css expression(css表达式)又称Dynamic properties(动态属性)是早期微软DHTML的产物,以其可以在Css中定义表达式(公式)来达到建立元素间属性之间的联系等作 ...
-
MYSQL死锁
转载时请以超链接形式标明文章原始出处和作者信息及本声明http://www.blogbus.com/ri0day-logs/59186177.html mysql使用myisam的时候锁表比较多,尤其 ...
-
Json解析要点
解析Json时,昨天遇到了新的问题,之前都是解析的数组,不是数组的用类来做. 这是Json串; {"status":"00001","ver" ...
-
BSA Network Shell系列-通过NSH执行Powershell,VBScript或bat files脚本
参考:Running Powershell, VBScript, or bat files via NSH 如果你直接在NSH命令行执行的话,可以参考我翻译的下面的东东,如果想运行NSH 脚本作业的话 ...
-
Redis数据结构之robj
本文及后续文章,Redis版本均是v3.2.8 我们知道一个database内的这个映射关系是用一个dict来维护的.dict的key固定用一种数据结构来表达,这这数据结构就是动态字符串sds.而va ...
-
Python介绍及环境配置
Python 简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有 ...
-
让我对 docker swarm mode 的基本原理豁然开朗的几篇英文博文
关于 docker swarm mode 的基本架构 How does it work? Docker! Part 1: Swarm general architecture 关于 Overlay N ...
-
web前端html快速入门
HTML 学前端之间不得不知道一个网站:http://www.w3school.com.cn/ 网上有很多教程关于前端的,写的特别详细,也写的特别好.我们应该要自已理解,一些相应的前端的知识,不能只是 ...
-
行高 line-height
一.行高的定义 line-height(行高):两行文字基线之间的距离 1.什么是基线? 2.为何是基线? 3.需要两行吗? 1.什么是基线? 我们上学的时候都用过,抄写英文字母的时候.其中有一条红线 ...