前端使用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此方法

相关推荐
我命由我123451 小时前
React - 类组件 setState 的 2 种写法、LazyLoad、useState
前端·javascript·react.js·html·ecmascript·html5·js
zt1985q2 小时前
本地部署开源元搜索引擎 SearXNG 并实现外部访问
服务器·网络协议·开源
自由生长20242 小时前
IndexedDB的观察
前端
摇滚侠2 小时前
系统工作台待办实时提醒,取代五分钟刷新一次,判断有没有新的待办,利用 WebSocket 实现
网络·websocket·网络协议
IT_陈寒2 小时前
Vite热更新坑了我三天,原来配置要这么写
前端·人工智能·后端
斯班奇的好朋友阿法法2 小时前
离线ollama导入Qwen3.5-9B.Q8_0.gguf模型
开发语言·前端·javascript
掘金一周2 小时前
每月固定续订,但是token根本不够用,掘友们有无算力焦虑啊 | 沸点周刊 4.2
前端·aigc·openai
小村儿3 小时前
连载加餐01-claude code 源码泄漏 ---一起吃透 Claude Code,告别 AI coding 迷茫
前端·后端·ai编程
半壶清水3 小时前
[软考网规考点笔记]-局域网之以太网标准
网络·笔记·网络协议·考试
莫物3 小时前
vue过滤表格数据导致的索引错乱问题
前端·javascript·vue.js