前端js封装一个聊天的websocket连接

已于 2024-08-16 12:04:08 修改
阅读量183 收藏
点赞数 3
文章标签： 前端 javascript websocket
于 2024-08-16 11:51:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w807139809/article/details/141255495
版权

今天我们来封装一下websocket的连接

首先我们新建一个js文件叫chatWs.js，下面是js的内容

// chatWs.js
import { Message } from "element-ui";
const STATE = {
  HEART: "heartbeat",
  LOGIN: "connection",
  LOGOUT: "disconnection",
  RECEIVED_MSG_RESULT: "receivedMsgResult",  //收到消息给一个响应
  MSG_RES: 'newMsg',         // 新消息通知
}
// 导出一个类
export class chatWs {
  constructor(){
    this.jsocket = null;        // 与 CTI 服务器，建立一个 websocket 对象
    this.wsUrl = '';
    this.reconnectTime = 6000;        // 重新连接间隔时间值
    this.keepaliveTime = 6000;        // 保持连接间隔时间值
    this.reconnectInterval = null;        // 重新连接定时器
    this.heartInterval = null;      // 心跳定时器
    this.headInterval = null;          // 计算心跳是否还在的定时器
    this.reconnected = false;      // 是否是重连
    this.isConnected = false;    // 是否已经连接
    this.callBack = {};      // 回调

    this.domainConfig = {};               // webscoket的域名等配置项
    this.sendMsgList = [];  // 发送过的心跳消息集合

    this.activeCloseWs = false; // 是否主动断开连接

    this.userName = "";


    this.msgSendResultTimer = {};   //消息发送是否成功定时器
    this.msgSendResultTimmOutTime = 5000;  // 消息发出之后未收到响应就认定发送失败的时间

  }
  init(config,cb){
    if(!config.domainConfig){
      let obj = {
        code: 0,
        message: '请先填写配置项'
      }
      this.errorMsgCallback(obj);
    }
    this.callBack = Object.assign({},cb);
    this.domainConfig = config.domainConfig;
    this.userName = config.userName;
    if(!this.domainConfig.protocol)this.domainConfig.protocol = "ws";

    this.wsUrl = this.domainConfig.isDomain ? `${this.domainConfig.protocol}://${config.domainConfig.domain}${config.domainConfig.suffix ? config.domainConfig.suffix : "" }` : `${config.domainConfig.protocol}://${this.domainConfig.domain}:${this.domainConfig.port}${config.domainConfig.suffix ? config.domainConfig.suffix : ""}`;
    this.connectWs();
  }
  connectWs(){
    if(this.jsocket)this.jsocket.close();
    try{
       this.jsocket = new WebSocket(this.wsUrl);
    } catch (e){
      this.jsocket = null;
      this.errorMsgCallback({message: `连接${this.wsUrl}有误`});
      return;
    }
    this.jsocket.onopen = (msg) => {   // ws已经连接
      this.wsOpen(msg);
    }
    this.jsocket.onmessage = (msg) => {
      this.wsMessages(msg.data);
    }
    this.jsocket.onerror =  (msg) => {
      this.wsError(msg);
    }
    this.jsocket.onclose = (msg) => {
      this.wsClose(msg);
    }

  }
  wsOpen(msg){
    this.isConnected = true;
    this.activeCloseWs = false;
    if(this.reconnectInterval)clearTimeout(this.reconnectInterval);
    this.login();
  }
  wsMessages(msg){
    try{
     msg = JSON.parse(msg);
    }catch(err) {
      return;
    }
    if(msg.event !== STATE.HEART)this.receivedMsgResult(msg);
    switch(msg.event){
      case STATE.HEART:
        const index = this.sendMsgList.findIndex(v => v.msgId === msg.msgId);
        if(index > -1)this.sendMsgList.splice(index,1);
        break
      case STATE.LOGIN:  // 登录成功发送心跳
        this.sendHeart();
        if(this.callBack.onLogin)this.callBack.onLogin(msg);
        break
      case STATE.LOGOUT:  // 退出登录
        if(this.callBack.onLogout)this.callBack.onLogout();
        this.beforClose();
        if(this.jsocket)this.jsocket.close();
        break;
      case STATE.MSG_RES:  // 收到聊天消息
        if(this.callBack.receviedMsg)this.callBack.receviedMsg(msg);
        break;      

      default :
       break
    }
  }
  wsError(msg){
    console.log('连接出错');

    let obj = {
      code : 0,
      message: `连接${this.wsUrl}失败，请联系运维人员处理`
    }
    if(this.callBack.connectError)this.callBack.connectError(obj);

    this.errorMsgCallback(obj);
    this.beforClose();
    if(!this.activeCloseWs)this.reConnectWs();//不是主动断开连接才发起重连
  }
  wsClose(msg){
    console.log('ws close');
    if(this.callBack.onLogout)this.callBack.onLogout();
    this.beforClose();

  }


  reConnectWs(){
    this.beforClose();
    if(this.reconnectInterval)clearTimeout(this.reconnectInterval);
    this.reconnected = true;
    // this.connectWs();
    this.reconnectInterval = setTimeout(()=> {
      this.reconnected = true;
      this.connectWs();
    }, this.reconnectTime)
  }
  beforClose(){
    if(this.heartInterval)clearInterval(this.heartInterval);
    if(this.headInterval)clearInterval(this.headInterval);
    this.isConnected = false;

  }
  closeWs(){
    if(this.reconnectInterval)clearTimeout(this.reconnectInterval);
    if(this.jsocket)this.jsocket.close();
    this.activeCloseWs = true;

  }
  errorMsgCallback(err){
    Message({
      message: err.message ? err.message : '失败',
      type: 'error'
    });
  }
  sendMsg(msg){
    if(!this.isConnected){
      let obj = {
        code: -1,
        message: "ws未连接"
      }
      this.errorMsgCallback(obj);
      return;
    }
    const msgId = this.uuid(32,16)
    let publicObj = {
      msgId: msgId,
      timestamp: new Date().getTime(),
      userName: this.userName
    }
    let obj = Object.assign(publicObj,msg);
    if(obj.event && obj.event === STATE.HEART) this.sendMsgList.push(obj);
    const str = JSON.stringify(obj);
    this.jsocket.send(str);
  }
  // 收到消息之后给一个收到的回应
  receivedMsgResult(row){
    const obj = {
      event : STATE.RECEIVED_MSG_RESULT,
      msgId: row.msgId,
    }
    this.sendMsg(obj);
  }
  sendHeart(){
    if(this.heartInterval)clearInterval(this.heartInterval);
    if(this.headInterval)clearInterval(this.headInterval);
    let obj = {
      event: STATE.HEART,
    }
    this.sendMsg(obj);
     //发送心跳包
    this.heartInterval = setInterval(() => {
      let obj = {
        event: STATE.HEART,
      }
      this.sendMsg(obj);

    }, this.keepaliveTime);

    this.headInterval = setInterval(() => {
      // 两次心跳没有响应间隔在三十秒之内
      if(this.sendMsgList.length > 2
        &&  (this.sendMsgList[this.sendMsgList.length - 1].timestamp - this.sendMsgList[this.sendMsgList.length - 2].timestamp) / 1000 > 30
         && (this.sendMsgList[this.sendMsgList.length - 1].timestamp - this.sendMsgList[this.sendMsgList.length - 3].timestamp) / 1000 > 30 ){
        let data =  {
          code: -11,
          message: '超过30秒没有心跳，需要重新登录.'
        }
        this.errorMsgCallback(data);
        this.beforClose();
        this.jsocket.close();

        setTimeout(()=>{
          Message({
            message: '将在6s之后进行重连',
            type: 'info'
          });
           // 10秒之后进行重连
          setTimeout(()=>{
            this.reConnectWs()
          }, 6000)

        },4000)
       

      }


    }, 10000);


  }

  login(){
    let obj = {
      event : STATE.LOGIN,
      isReConnection: this.reconnected ? 1 : 0,
      token: sessionStorage.token,
      type: 1,
    }
    this.sendMsg(obj);
  }
  uuid (len,radix) {
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
      .split('');
    var uuid = [], i;
    radix = radix || chars.length;

    if (len) {
      // Compact form
      for (i = 0; i < len; i++)
        uuid[i] = chars[0 | Math.random() * radix];
    } else {
      // rfc4122, version 4 form
      var r;

      // rfc4122 requires these characters
      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
      uuid[14] = '4';

      // Fill in random data.  At i==19 set the high bits of clock sequence as
      // per rfc4122, sec. 4.1.5
      for (i = 0; i < 36; i++) {
        if (!uuid[i]) {
          r = 0 | Math.random() * 16;
          uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
        }
      }
    }
    return uuid.join('');
  }

}

调用方式

// xxx.vue中
<script>
import {chatWs} from './chatWs.js';
export default {
	  data (){
	    this.chatWs = new chatWs();
	    return {
	    
	    }
	  },
	  computed:{
	   callBack(){
      	return {
      	 receviedMsg:(obj)=>{
      	 // 收到消息的回调函数   do someing····
      	 }
      	}
      }	
	  },

 mounted(){
    this.initWs();
  },
  beforeDestroy(){
    console.log('page beforeDestroy');
    this.chatWs.beforClose();
    this.chatWs.closeWs();
  },
  methods:{
  	initWs(){
	    let config = {
	        domainConfig:{
	          domain: 127.0.0.1,  // ip或者域名
	          port: 8866,  // 端口
	          protocol: location.protocol === 'https:' ? 'wss' : 'ws',
	          suffix:'/api/websocket',// 可要可不要，具体看根据后端的ws地址来决定
	          isDomain: 0, // ws地址是否需要端口  0-需要（本地调试是ip地址需要端口）  1-不需要（线上域名不需要端口）
	       
	        },
	        userName: sessionStorage.user ? JSON.parse(sessionStorage.user).email : '',  // 连接ws的用户名
	
	      }
	      this.chatWs.init(config, this.callBack);   // 发起ws连接
	      }
	   }
	  
 }

 </script>
夕阳_醉了
关注
一个页面连接多个websocket
虎康的博客
04-26 3365
【代码】一个页面连接多个websocket。
websocket封装
码农键盘上的梦
05-31 851
websocket在前端开发中，是一个必须掌握的技术！你可以不用，但必须掌握！前几天，就遇到这样一个需求，要求界面的数据通过websocket实时推送，并且必须支持断网重连、自动心跳！自动心跳是定期向服务端发送小型数据包，如果一段时间内服务端没有收到心跳响应，系统可能会断开连接。websokect的API非常简单// 创建ws连接console.log('WebSocket 连接已经建立。');');console.log('收到服务器消息：', event.data);
Vue+WebSocket 实现页面实时刷新长连接
岁末zzz的博客
12-14 785
最近vue项目要做数据实时刷新，折线图每秒重画一次，数据每0.5秒刷新一次，说白了就是实时刷新，因为数据量较大，用定时器估计页面停留一会就会卡死。。。 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示，记录一下过程以及碰到的问题； 注意：页面刷新长连接会被关闭，其实进入当前页面建立长连接的目的就是页面不用F5刷新，所有数据自动实时刷新，如果还是来回F5大刷页面那就没有意义了...
JS webSocket 封装
M_茶安丶的博客
05-10 746
【代码】JS webSocket 封装。
websocket 封装js 心跳，断网重连，收发信息，页面直接调用
最新发布
u011933026的博客
06-28 344
websocket
js封装websocket
_小郑有点困了的博客
07-15 2682
场景 将websocket实例以及包含的额方法封装为ws.js，方便调用。无论是原生h5开发还是现代框架开发都可以使用。很多地方经常需要进行长连接进行异步任务，所以websocket是个十分不错的方式。（导入，导出，报警事件推送等等） 效果（实际运行浏览器截图） ws.js代码 /** * 使用方法 * 1、连接某个 websocket */ //在这ws let wsOnMessage = [] let wsOnMessages = [] let wsOnOpen = [] let wsStatus
js WebSocket封装
weixin_42199478的博客
07-14 1940
//浏览器WebSocket对象 var wsImpl = window.WebSocket || window.MozWebSocket; function SocketStart(options, cl) { this.url = options.url;//Socket地址 this.ws = new wsImpl(options.url);//初始化Socket对象 this.userid = options.userid;//用户id this.onmessage
js 封装websocket (包括心跳检测，断线重连等)
weixin_43827751的博客
08-05 3279
代码】js 封装websocket (包括心跳检测，断线重连等)
前端连接websocket失败_vue websocket 连接实战及遇到的问题
weixin_39621870的博客
12-23 7642
常规的连接方法websocket () {let ws = new WebSocket('ws://localhost:8080')ws.onopen = () => {// Web Socket 已连接上，使用 send() 方法发送数据ws.send('Holle')console.log('数据发送中...')}ws.onmessage = evt => {// console....
2024年Web前端最新习惯了微信聊天，利用WebSocket手动实现个聊天功能怎么样？，阿里前端面试必问
2401_84620288的博客
05-06 368
框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
websocket.js
03-13
/** * @date 2019/12/17 * @author zyw * @description 封装websocket * @return new WBT() * @callback { * open(callback) // 建立连接 * close(callback) // 关闭连接 * watch(callback) // 服务端推送消息 * error(callback) // websocket报错 * send(callback) // 客户端向服务端发送消息 * } */
websocket封装包
12-30
android开发中，使用okhttp和websocket，建立稳定可靠的长连接，亲测，没有任何问题，欢迎下载
js使用websocket
02-24
本例为使用最基本的js实现websocket的连接，内有详细注释。
socket.js文件压缩包websocket
03-22
这是一个websocket的前端用的js文件，试过了好用，可以用在h5和java服务器之间通信，
websocket聊天 netty聊天
02-17
通过阅读和理解`netty聊天源码`，你可以更深入地了解如何结合WebSocket和Netty实现一个完整的聊天系统。同时，对于前端部分，你还需要熟悉HTML、CSS和JavaScript，尤其是JavaScript的WebSocket API，以完成客户端的...
webSocket通信js封装
qq_38746300的博客
01-13 2111
webSocket通信js封装
[Js进阶]WebSocket操作类封装
SCUhzs
12-06 1019
[Js进阶]WebSocket操作类封装
【JavaScript】js的websocket封装调用
DomCode
12-22 1065
Websocket是一种用于在服务器和客户端之间实现高效的双向通信的机制，通过WebSocket，其目的是在应用和服务器进行频繁双向通信时，可以使服务器避免打开多个HTTP连接进行工作来节约资源，提高了工作效率和资源利用率。
前端 js websocket 封装
05-11
我们可以使用 JavaScript 中的 `WebSocket` 对象来创建一个 WebSocket 连接，然后封装一些常用的方法来简化操作。以下是一个简单的封装示例： ```javascript class WebSocketClient { constructor(url) { this.url = url; this.websocket = null; this.isConnected = false; this.connect(); } connect() { this.websocket = new WebSocket(this.url); this.websocket.onopen = () => { this.isConnected = true; console.log('WebSocket 连接成功'); }; this.websocket.onmessage = (event) => { console.log('收到消息：', event.data); }; this.websocket.onclose = () => { this.isConnected = false; console.log('WebSocket 连接关闭'); }; this.websocket.onerror = (error) => { console.error('WebSocket 错误：', error); }; } send(message) { if (this.isConnected) { this.websocket.send(message); console.log('发送消息：', message); } else { console.error('WebSocket 连接未建立'); } } close() { if (this.isConnected) { this.websocket.close(); console.log('WebSocket 连接关闭'); } else { console.error('WebSocket 连接未建立'); } } } ``` 使用示例： ```javascript const ws = new WebSocketClient('ws://localhost:8080'); ws.send('Hello, WebSocket!'); ws.close(); ``` 在上面的示例中，我们使用 `WebSocketClient` 类来封装了一个 WebSocket 客户端，提供了 `connect`、`send` 和 `close` 方法。其中，`connect` 方法用于建立 WebSocket 连接，`send` 方法用于发送消息，`close` 方法用于关闭连接。在创建实例时，会自动调用 `connect` 方法来建立连接。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值