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

1、接口实现

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

初始化

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

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

2)安装需要使用的npm包:nodeexpressws(即websocket)

  1. npm install node express ws --save

3)这里使用ts开发,所以需要安装ts需要使用的类型定义包(如果使用js就不要安装了)

  1. npm install @types/node @types/express @types/ws -- save

4)安装node热更新依赖包nodemon

  1. npm install nodemon --save

创建web服务器

新建demo-server.ts文件

1)数据模拟

  1. // demo-server.ts
  2. export class Demodata {
  3. constructor(
  4. public id: number,
  5. public name: string,
  6. public desc: string) { }
  7. }
  8. const datas: Array<Demodata> = [
  9. new Demodata(1, 'heimayu', 'this is my bolg name'),
  10. new Demodata(2, 'websocket', 'this chapter is introduce websocket'),
  11. new Demodata(3, 'express', 'you can use express to start webapp')
  12. ]

2)使用express快速搭建web服务器

  1. // demo-server.ts
  2. import * as express from 'express';
  3. const app = express();
  4. // 启动服务器
  5. app.listen(8001,'localhost',_=>{
  6. console.log('demo服务器已启动,访问地址http://localhost:8001')
  7. })

模拟接口请求


  1. // 接口请求-获取数据
  2. app.get('/datas', (req, res) => {
  3. res.send(datas) //数据发送
  4. })
  5. // 接口请求-根据id获取数据
  6. app.get('/datas/:id', (req, res) => {
  7. let url_id: number = req.params.id;
  8. let data: Demodata = datas.find(item => {
  9. return item.id == url_id
  10. });
  11. res.send(data);
  12. })

将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

  1. npm install ws --save

服务端使用ws

  1. import { Server } from 'ws';
  2. // 定义websocket服务器
  3. const wsServer = new Server({ port: 8085 });
  4. // 定义连接到的websocket集合
  5. let socketSet = new Set<any>();
  6. // 连接
  7. wsServer.on('connection', websocket => {
  8. socketSet.add(websocket)
  9. });
  10. // 初始化消息数
  11. let message = 0;
  12. // 定时2s发送消息
  13. setInterval(() => {
  14. socketSet.forEach(ws => {
  15. if (ws.readyState == 1) {
  16. ws.send(JSON.stringify({
  17. message: message++
  18. }))
  19. } else {
  20. socketSet.delete(ws);
  21. }
  22. })
  23. }, 2000)

4、websocket客户端

websocket对象

  1. /**
  2. * url:连接的url
  3. * protocol:可选,接受的子协议
  4. **/
  5. var ws = new WebSocket(url,[protocol])

websocket属性

ws.readyState

  • 0:表示连接尚未建立
  • 1:已建立,可以通信
  • 2:连接正在关闭
  • 3:连接已经关闭

websocket事件

事件 描述
open 连接建立时触发
message 客户端接收服务端数据时触发
error 通信发生错误
close 连接关闭时触发

websocket方法

方法 描述
send() 使用连接发送数据
close() 关闭连接

客户端使用ws

  1. // angular代码
  2. message: number = 0; // 消息数
  3. ws: WebSocket; // 定义
  4. ngOnInit() { // 初始化
  5. this.ws = new WebSocket('ws://localhost:8085');
  6. // 客户端接收消息
  7. this.ws.onmessage = (event) =>{
  8. this.message = JSON.parse(event.data).message;
  9. }
  10. // 出错
  11. this.ws.onerror = (error) =>{
  12. console.log(error);
  13. }
  14. // 关闭
  15. this.ws.onclose = ()=>{
  16. console.log('webSocket断开连接')
  17. }
  18. }

即时通讯成功!

前端使用express+node实现接口模拟及websocket通讯的更多相关文章

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

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

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

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

  3. 学习axios必知必会(1)~axios基本介绍、axios配置、json-server接口模拟工具

    一.axios基本介绍 1.axios(前端最流行的 ajax 请求库) 特点: ① 基于 xhr + promise 的异步 ajax 请求库 ② 浏览器端/node 端都可以使用 ③ 支持请求/响 ...

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

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

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

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

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

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

  7. Javascript 接口模拟

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

  8. ajax请求node.js接口时出现 No 'Access-Control-Allow-Origin' header is present on the requested resource错误

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

  9. 【转】SoapUI5.0创建WebService接口模拟服务端

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

随机推荐

  1. how to use windows azure market

    here is the sample. namespace USCrime2006and2007 { class Program { static void Main(string[] args) { ...

  2. Eclipse设置自动生成的javadoc

    1.点击 Window -> Preference -> Java -> Code Style -> Code Template ,在右边选择 Comments -> 相 ...

  3. redis主从 && 伪群集

    redis主从非常简单,仅需要要从上的配置文件里指定主的IP和端口就可以了.如果主上有密码,则再添加主的密码即可!! slaveof 192.168.15.230 6379 # 添加主上的IP和端口, ...

  4. thinkphp3.2.3 批量包含文件

    自己瞎写的...凑合看吧...核心就是用正则 表达式 或者 字符串 str_replace 进行 替换....... /** * 批量包含---,不能递归包含!!! 请不要在目标目录 包含 文件夹,因 ...

  5. P4320 道路相遇

    [Luogu4320] 必经点数==圆方树上两点路径上圆点数 也就等于边数/2+1 没什么好说的 , 看代码 #include<cstdio> #include<iostream&g ...

  6. docker 创建容器时遇到的坑

    坑一.时区问题 在创建系统镜像时,比如centos,会默认最小安装,并且时区默认的是UTC 所以在下好centos的原始镜像后,最好再重新构建一个新的镜像 # 命令 docker pull cento ...

  7. redis 网络架构

    https://blog.csdn.net/simplemurrina/article/details/53890542 GDB  redis https://gitbook.cn/gitchat/c ...

  8. strus2配置strus.xml问题-The content of element type "package" must match "(result-types?,interceptors?

    搭建strus2项目,在配置strus.xml时候碰到了这个问题: The content of element type "package" must match "( ...

  9. js动态给textarea赋值

    document.getElementById("new_analysed_news").value=datas.weatherContent;

  10. GreenPlum 大数据平台--运维(一)

    .最后分析或真空或创建表或等... Select * from pg_stat_operations where schemaname='SCHEMA NAME ' and actionname in ...