(精华2020年5月21日更新) vue实战篇实时通信websocket的封装结合vue的使用

最新推荐文章于 2024-08-27 10:52:38 发布

2b勿扰

最新推荐文章于 2024-08-27 10:52:38 发布

阅读量1.5w

点赞数 3

分类专栏： (持续更新)vue实战篇文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41181778/article/details/106269644

版权

本文详细介绍了如何在Vue.js项目中封装WebSocket以便实现页面的实时通信功能，结合具体的Vue组件，展示了WebSocket的创建、连接、消息发送与接收的完整流程。

摘要由CSDN通过智能技术生成

import webSocket from '../webSocket.js';
export default {
   
  isIosAndroid() {
   
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
      isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
      isChrome = u.indexOf('Safari'); //浏览器端
    return {
   
      isAndroid,
      isiOS,
      isChrome
    }
  },
  websocktSend(paramsObj) {
   
    // this --> store
    //这个是用来向后端websocket发送信息，发送之前需要先判断是否还处理链接状态
    var userId = localStorage.getItem('userId');
    var sendMsg = () => {
   
      window.socketServer.send(JSON.stringify(paramsObj)); //给后端发送信息
    }
    if (window.socketServer.readyState == 1) {
   
      sendMsg();
    } else {
   
      // 这里的this是$store,传递进来的
      // 这个this你并不知道
      webSocket.call(this, wsconPath[sceneParam] + userId).then(() => {
   
        sendMsg();
      });
    }
  },
  // 时间显示的几分钟、几小时、当天、昨天、前天以及更早的具体时间
  // 2019-12-07 09:58:23
  // JS计算两个日期时间差，天 小时 分 秒格式
  showDiffTime: function (startDate) {
   
    if (!startDate) {
   
      return;
    }
    var startDate = startDate.replace(new RegExp(/-/gm), "/");
    var startDat