uniapp开发微信小程序使用socket实时通信

最近开发了一个微信小程序,用的是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('连接超时');
    }
  })

}

到这里就可以实现了,有问题的可以留言交流 ~

  • 2
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值