最近开发了一个微信小程序,用的是uniapp+vue3+ts技术栈,现在要结合socket发送通知,试了两种方式
这里不推荐使用uniapp自带的socket(博主用的有问题,连不上去,感兴趣的也可以试试)
下面上代码
// 第一步,建立一个文件夹,存放文件 weapp.socket.io.js
资源地址:https://blog-static.cnblogs.com/files/sanyekui/weapp.socket.io.js
// 第二步,建立socket.js文件
const io = require("./weapp.socket.io.js"); // 引入 socket.io
const url = "xxxx"; // 带入自己的socket请求地址
let wsStatus = false;
let onSocket = null;
onSocket = io(url, {
transports: ["websocket"],
//设置最大重试次数
reconnectionAttempts: 50,
reconnectionDelay: 2000,
forceNew: true,
}); // 连接 socket
export const connect = function (cb) {
if (!onSocket) {
onSocket.on("connect", function (res) {
// 监听socket 是否连接成功
console.log("%c onSocket连接成功", "color: green", url, res);
cb(true, onSocket);
wsStatus = true;
});
setTimeout(function () {
// 超时10秒,返回false
if (!wsStatus) {
cb(false, onSocket);
}
}, 10000);
} else {
cb(true, onSocket);
}
};
// 第三步,引入使用
const getWxSocket = () => {
// 监听socket 是否连接成功
const socket = require("/static/js/socket.js");
socket.connect((status: boolean, ws: any) => {
// 连接成功
console.log(status, ws)
if (status) {
// 向服务端发送消息
ws.emit('identify', 'arrived'); // 参数一:发送消息的socket名,参数二: 发送的数据
ws.on("connect", () => {
console.log("%c ws连接成功", 'color: yellow');
});
// 接受服务端传来的消息
ws.on('message', (res: any) => { // 参数一:接收消息的socket名,参数二:返回的信息 function
console.log('%c 服务器返回数据 message', 'color: red', res)
});
ws.on('visitor.record.arrived', (res: any) => { // 参数一:接收消息的socket名,参数二:返回的信息 function
console.log('%c visitor.record.arrived', 'color: blue', res)
});
ws.on('pjhc1720', (res: any) => { // 参数一:接收消息的socket名,参数二:返回的信息 function
console.log('%c pjhc1720', 'color: #f05b72', res)
});
ws.on("connect_error", (d: any) => {
console.log("ws连接失败");
ws.connect();
});
ws.on("connect_timeout", (d: any) => {
console.log("ws连接超时");
});
ws.on("disconnect", (reason: any) => {
console.log("ws连接断开");
ws.connect();
});
ws.on("reconnect", (attemptNumber: any) => {
console.log("ws正在重连");
});
} else {
// ...连接超时
console.log('连接超时');
}
})
}
到这里就可以实现了,有问题的可以留言交流 ~