当时由于c++同事当时出差,于是自学了webSocket并用node搭建了一个简单的服务端用来自己调试,当时就感觉到求人不如求己啊。 P.s:参考的有网上的文章,珠峰全栈里的webSocket、黑马pink老师B站里的另一个老师的实战项目课程里的
webSocket相关基础内容请查看
内容待更新
一、搭建node服务端
1、安装node环境
2、安装nodejs-websocket
控制台输入命令
npm install nodejs-websocket
复制代码
3、新建socket.js文件
socket.js
const ws = require("nodejs-websocket");
console.log("开始建立连接...")
const socket = ws.createServer(function(conn){
conn.on("text", function (str) {
console.log("message:"+str)
let msg = "你好,这里是是日前端~"
// let msg = 'websocket处于正常状态'
setInterval(() => {
conn.sendText(msg);
}, 3000)
})
conn.on("close", function (code, reason) {
console.log("关闭连接")
});
conn.on("error", function (code, reason) {
console.log("异常关闭", code, reason)
});
}).listen(8666)
console.log("WebSocket建立完毕")
module.exports = socket
复制代码
4、运行该js文件看到如下日志即可
二、客户端直接调用
1、新建test.html文件
test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="test"></div>
<script>
if(window.WebSocket){
var ws = new WebSocket('ws://localhost:8666');
ws.onopen = function(e){
console.log("连接服务器成功");
// 向服务器发送消息
ws.send("来自客户端的消息");
}
ws.onclose = function(e){
console.log("服务器关闭");
}
ws.onerror = function(){
console.log("连接出错");
}
// 接收服务器的消息
ws.onmessage = function(e){
let message = "message:"+e.data+"";
console.log(message);
document.getElementById('test').innerHTML = message
}
}
</script>
</body>
</html>
复制代码
2、浏览器运行,看到控制台日志如下即成功
三、Vue中函数封装使用
1、新建socket_service.js
socket_service.js
export default class SocketService {
/**
* 单例
*/
static instance = null
static get Instance() {
if (!this.instance) {
this.instance = new SocketService()
}
return this.instance
}
// 和服务端连接的socket对象
ws = null
// 存储回调函数
callBackMapping = {}
// 标识是否连接成功
connected = false
// 记录重试的次数
sendRetryCount = 0
// 重新连接尝试的次数
connectRetryCount = 0
// 定义连接服务器的方法
connect() {
// 连接服务器
if (!window.WebSocket) {
return console.log('您的浏览器不支持WebSocket')
}
this.ws = new WebSocket('ws://localhost:1234')
// 连接成功的事件
this.ws.onopen = () => {
console.log('连接服务端成功')
this.connected = true
// 重置重新连接的次数
this.connectRetryCount = 0
}
// // 1.连接服务端失败
// // 2.当连接成功之后, 服务器关闭的情况(连接失败重连)
this.ws.onclose = () => {
console.log('连接服务端失败')
this.connected = false
this.connectRetryCount++
setTimeout(() => {
this.connect()
}, 500 * this.connectRetryCount)
}
// 得到服务端发送过来的数据
this.ws.onmessage = msg => {
console.log('从服务端获取到了数据' + msg.data)
// if (this.callBackMapping) {
// this.callBackMapping.call(this, dataList)
// }
}
}
// 回调函数的注册
registerCallBack (callBack) {
console.log('回调函数的注册', callBack)
this.callBackMapping = callBack
}
// 取消某一个回调函数
unRegisterCallBack(callBack){
console.log('取消某一个回调函数', callBack)
this.callBackMapping = null
}
// 发送数据的方法
send (data) {
// 判断此时此刻有没有连接成功
if (this.connected) {
this.sendRetryCount = 0
this.ws.send(data)
} else {
this.sendRetryCount++
setTimeout(() => {
this.send(data)
}, this.sendRetryCount * 500)
}
}
}
复制代码
2、在main.js中全局引入实例并挂载到原型
import SocketService from '@/server/socket_service'
// 对服务端进行websocket的连接
SocketService.Instance.connect()
Vue.prototype.$socket = SocketService.Instance
复制代码
3、在vue组件中使用发送(客户端向服务端发送数据)
this.$socket.send(‘这是客户端发送的数据’)
复制代码
4、在vue组件中使用接收(客户端接收服务端发送的数据)
1)注册回调函数
created(){
// 注册回调函数
this.$socket.registerCallBack(this.testData)
}
复制代码
2)取消回调函数
destroyed(){
// 取消回调函数
this.$socket.unRegisterCallBack(this.testData)
},
复制代码
3)接收到数据data
testData(data) {
console.log('获取到传感器websocket数据', data)
}
复制代码