前端使用webSocket与后台建立连接并进行心跳监测机制

1:前端代码如下

首先项目中需要引入websocket

javascript 复制代码
  // WebSocket对象方法
  getWebSocket(){
    // 创建一个 websocket 连接
    var ws = new WebSocket("ws://10.66.78.118:8085/api/cloud/ws");
    // websocket 创建成功事件
    ws.onopen = function (event) {
      window.setInterval(function ping() {
        ws.send('Hello, WebSocket!'); // 发送一条消息
        console.log('已发送消息');
      }, 10000);
      console.log('WebSocket连接成功',event);
    };
    // websocket 接收到消息事件
    ws.onmessage = function (e) {
      const messageContent = JSON.parse(e.data);
      console.log('收到消息:', messageContent);
      var msg = JSON.parse(e.data);
      console.log(msg,'消息事件')
    }
    // 关闭
    ws.onclose = function close() {
      console.log('Disconnected');
    };
    // websocket 错误事件
    ws.onerror = function (error) {
      console.error('WebSocket error observed:', error);
    };
  }
  

2.在页面初始化的时候调用getWebSocket此方法

相关推荐
恋猫de小郭几秒前
AI 时代的工程师需要具备什么能力?Augment Code 给出了他们的招聘标准
前端·人工智能·ai编程
kyriewen2 分钟前
别再滥用 iframe 了!这些场景下它其实是最优解
前端·javascript·html
Nile3 分钟前
解密openclaw底层pi-mono架构系列一:5. pi-web-ui
前端·ui·架构
皙然4 分钟前
Socket 与 WebSocket 深度解析
网络·websocket·网络协议
郝学胜-神的一滴12 分钟前
系统设计与面向对象设计:两大设计思想的深度剖析
java·前端·c++·ue5·软件工程
徐同保16 分钟前
openclaw插件
前端
摸鱼仙人~17 分钟前
前端面试最常考、最容易被问崩的 50 道八股精简版
前端·面试·职场和发展
恪愚27 分钟前
three | 材质 Material
前端·javascript·材质
zuoerjinshu29 分钟前
WebSpoon9.0(KETTLE的WEB版本)编译 + tomcatdocker部署 + 远程调试教程
前端
lxmyzzs42 分钟前
解决Windows安装OpenClaw报错:无法加载npm.ps1,禁止运行脚本
前端·windows·npm·openclaw