一、背景和实现目标
背景:
后端使用基于nodejs下搭建的express脚手架,使用安装第三方包ws
前端使用uniapp,但是调用的是*wx*的方法,并在微信小程序上运行测试
实现目标:
前后端简单通信
二、后台搭建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但是调用wx方法并在微信小程序上测试实现websocket通信
在创建好的uniapp项目中,代码如下:
<template>
<view class="healths">
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
getWebsocket() {
//url: 'ws://localhost:9998', //后端给的地址,这里9998为后端创建的端口
// 使用wx的connectSocket方法创建链接
wx.connectSocket({
url: 'ws://localhost:9998'
})
// 使用onSocketOpen方法打开链接通道
wx.onSocketOpen(function(res) {
console.log('WebSocket连接已打开!')
wx.sendSocketMessage({ //发送消息,这里发送随机数,根据自己需要进行修改传的参
data: 'Hello,World:' + Math.round(Math.random() * 0xFFFFFF).toString(),
})
})
// 使用onSocketMessage方法监听接收到的消息
wx.onSocketMessage(function(res) {
console.log(res, '接受到的消息')
})
// 链接关闭
wx.onSocketClose(function(res) {
console.log('WebSocket连接已关闭!')
})
}
},
onLoad() {
this.getWebsocket() //初始化websocket
}
}
</script>
<style lang="scss" scoped>
.healths {
width: 100vw;
height: 100vh;
background: #d5fcff;
}
</style>
运行示例: