构建前端实时通信——webSocket

一，webSocket简介

WebSocket是Vue组件提供的原生API，同时uniapp也集成了该API。其是一种网络通信协议，允许服务器主动向客户端推送消息，实现双向通信。在实时应用（如聊天、在线游戏）中常用。学习 WebSocket 可提升实时交互能力。难点在于处理连接状态、重连逻辑及跨域问题。

WebSocket可以用于实现即时聊天功能，用户可以实时收发消息，无需刷新页面。这种实时性对于社交应用、客户支持等非常重要。

下面举例在uniapp项目中使用webSocket进行即时通信聊天功能的流程。

二，技术开发
2.1，使用uniapp提供的 api创建WebSocket连接

import { WS } from '@/util/wsConfig.js',

onShow() {
  if (uni.getStorageSync('token')) {
    this.connectSocketInit();
  }
},

methods: {
  connectSocketInit: function() {
    let self = this;
    if (self.reConnect) {
      console.log("连接socket");
      self.socketTask = uni.connectSocket({
        url: WS,
        success(data) {
          console.log("连接socket成功");
        },
        fail(data) {
          console.log("连接socket失败");
        }
      });
    }
  }
}

当用户进入聊天页面后，通过uni.connectSocket（）创建一个WebSocket连接，其中，url为所要连接的地址，（ws为引入地址）请求发送成功则回调success：(function(res) {})，否则回调fail：(function(res) {})。

2.2，显示连接成功/失败

//连接成功
uni.onSocketOpen(function(res) {
  //监听WebSocket连接打开事件
  let msgData = {
    messageType: "CONNECT",
    info: self.ownerId
  };
  console.log("发送连接请求");
  self.websocketSendMessage(msgData);
});
//连接失败
uni.onSocketError(function(res) {
  console.log('webSocket连接打开失败，请检查!', res);
});

WebSocket连接成功则回调uni.onSocketOpen(function(res) {})；WebSocket连接失败则回调uni.onSocketError(function(res) {})。

2.3 监听服务器发来的数据

// 监听服务器发来的消息
websocketOnMessage() {
  let self = this;
  uni.onSocketMessage((res) => {
    console.log("监听到socket信息：", res);
    if ("CONNECT_SUCCESS" == res.data) {
      //建立连接成功后开始心跳
      this.reset(); // 检测心跳reset,防止长时间连接导致连接关闭
    } else {
      //收到消息
      let msgData = JSON.parse(res.data);
      console.log("收到消息：", JSON.stringify(msgData));
      //消息应答
      this.answerMessage(msgData.msgNo);
      // debugger
      let ceiveMsg = JSON.parse(res.data);
      if (ceiveMsg.sendUserId == self.sendUserId) {
        self.referesh();
      }
    }
  });
},

通过uniapp官网的api：uni.onSocketMessage(function(res) {})获取服务器发来的数据。res为响应体，res.data为响应的真实数据，通过JSON.parse()解析数据并作相应处理。

2.4 发送消息给服务器

answerMessage(MsgNo) {
  let self = this;
  uni.sendSocketMessage({
    data: '{"messageType":"ANSWER","info":"' + MsgNo + '"}',
    success() {
      console.log("消息应答：" + MsgNo);
    },
    fail() {
      console.log("消息应答失败");
    }
  });
}

通过uniapp官网的api：uni.sendSocketMessage({})给服务器发送消息。data为所要发送数据，其值为JSON格式，消息发送成功则回调success: (res) => {}，同时进行前端的渲染，否则回调fail: (err) => {}。

2.5，断开连接

// 关闭websocket【离开这个页面的时候执行关闭】
closeSocket() {
  let self = this;
  uni.closeSocket({
    success(res) {
      console.log("关闭成功", res);
    },
    fail(err) {
      console.log("关闭失败", err);
    },
  });
}

用户退出聊天页面后，通过uni.closeSocket()断开连接，并判断是否成功断开连接。

三，总结

WebSocket是实现实时通信的有力工具，希望这篇文章能帮助大家理解如何在前端实现WebSocket通信。WebSocket使得构建实时应用变得更加容易，为用户提供了更好的实时体验，愿你的项目变得更加实时和互动。