使用基于node的express脚手架搭建后台服务器和uniapp小程序实现websocket简单通信

一、背景和实现目标

背景：

后端使用基于nodejs下搭建的express脚手架，使用安装第三方包ws
前端使用uniapp，并在微信小程序上运行测试

实现目标：

前后端简单通信

二、后台搭建express脚手架和编写websocket方法

1.新建一个文件夹，存放express，打开黑窗口初始化项目，生成package.json文件，用于记录安装的包

npm init -y

2.下载安装express

npm install express

3.在目录下新建websocket.js文件，搭建websocket服务

const WebSocket = require('ws') //引入ws模块
// 创建websocket服务端对象，端口号为9998
// 为ws创建一个接口,就是连接websocket的链接
const wss = new WebSocket.Server({ 
    port:9998
})
// 导出监听方法
module.exports.listener = () =>{
    // 监听到后，触发connection事件
    // 对客户端连接事件进行监听,只要有WebSocket连接到该服务器，就会触发'connection'事件
    // ws代表的是客户端的连接的socket对象;req对象可以用来获取客户端的信息，如ip、端口号
    wss.on('connection',(ws,req)=>{
        console.log('连接成功',ws,req)
        // 若要获取所有已连接的客户端信息，则可以使用server.clients数据集
        ws.on('message',(msg)=>{
            console.log('客户端发送给服务器',msg)
            // 当客户端连接成功后会发送一条消息给服务器，服务器监听到消息后返回给客户端
            const data = ["1","2","3","4"]
            let i = 0
            setInterval(()=>{
                if(i === data.length){
                    i = 0
                }
                // 发送数据调用send方法
                ws.send(JSON.stringify(data[i]))
                i++
            },2000)
        })
        // 监听要关闭连接的函数
        ws.on('close',function close(){
            // 关闭逻辑
            console.log('WebSocket连接已关闭')
        })
    })
}

三、在express中搭建服务器并注入websocket方法

1.在目录下新建index.js文件，引入express框架，并在js文件中使用websocket，并监听开启的websocket服务器

const express = require("express") //引入express框架
const app = express()//创建一个express实例，可以配置和定义路由、中间件、启动服务器
const port = 3001
// 可以再浏览器中访问http://localhost:3001/并看到你的应用响应
// 这里使用express.static函数，托管静态资源的内置中间件
app.use('/',express.static('public')) //酌情使用，这里只做介绍，并未使用，与通讯无关哈
app.use(express.json())//解析 JSON 格式的请求体数据
// 监听端口
app.listen(port,()=>{
    console.log('server is running , port is ' + port)
})
// 监听开启的websocket服务器
const websocketServer = require('./websocket')
websocketServer.listener()

2.启动服务器，在express文件目录中打开黑窗口，输入命令

node index.js

注意：index.js为引入express框架的js文件，根据自己的项目名称更换命令

四、前端使用uniapp并在微信小程序上测试实现websocket通信

在创建好的uniapp项目中，代码如下：

<template>
	<view class="healths">

	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			getWebsocket() { //初始化websockjet方法
				// 使用uni的connectSocket方法
				// 写法1
				uni.connectSocket({
					url: 'ws://localhost:9998', //后端给的地址，这里9998为后端创建的端口号
					// header: {  //请求头，一般没有特殊要求不需要写
					// 	'content-type': 'application/json' 
					// },
					// protocols: ['protocol1'], //子协议数组，一般没有特殊要求不需要写
					// method: 'GET', //请求方法，一般不需要写
				});
				// 写法2
				// 如果需要返回一个socket对象，则至少需要传入success/fail/complete参数中的一个，如下
				// let websockets = uni.connectSocket({
				// 	url:"ws://localhost:9998",
				// 	complete: (res) => {},//接口调用结束的回调函数（调用成功、失败都会执行），里边可以写自己需要的逻辑
				// 	success(res) {},//成功的回调，里边可以写自己需要的逻辑
				// 	fail(res) {},//失败的回调，里边可以写自己需要的逻辑
				// })
				// 打开方法
				uni.onSocketOpen(function(res) {
					sendSocketMessage('123123'); //调用sendSocketMessage方法发送消息
					console.log(res, 'open') 
				});
				// 自定义发送消息方法，按需要修改里边的逻辑
				function sendSocketMessage(msg) {
					console.log(msg, 'sendMsg')
					uni.sendSocketMessage({ //调用uni的sendSocketMessage方法
						data: msg
					});
				}
				// 使用uni的onSocketMessage监听收到的消息
				uni.onSocketMessage(function(res) {
					console.log('收到服务器内容：' + res.data); //消息在res.data中
				});
				// 使用uni的onSocketError方法监听打开失败，并写自己需要的逻辑
				uni.onSocketError(function(res) {
					console.log('WebSocket连接打开失败，请检查！');
				});
			}
		},
		onLoad() {
			this.getWebsocket() //初始化websocket
		}
	}
</script>

<style lang="scss" scoped>
	.healths {
		width: 100vw;
		height: 100vh;
		background: #d5fcff;
	}
</style>

实现结果如下：