websocket vue操作

复制代码
let websocket: WebSocket;
/** websocket测试 */
function connectWebsocket() {
  if (typeof WebSocket === "undefined") {
    console.log("您的浏览器不支持WebSocket");
    return;
  }

  // let ip = window.location.hostname + ":8080";
  let ip = "10.192.30.161:8080";
  let url = `ws://${ip}/websocket/download`;
  // 打开一个websocket
  websocket = new WebSocket(url);

  // 建立连接
  websocket.onopen = () => {
    console.log("websocket已连接");
    // websocket.send("ping");
  };
  // 客户端接收服务端返回的数据
  websocket.onmessage = (evt) => {
    let data = evt.data
    console.log("websocket返回的数据:", data);
    if (data.length > 0) {
      handleSearch();
    }
  };
  // 发生错误时
  websocket.onerror = (evt) => {
    console.log("websocket错误:", evt);
  };
  // 关闭连接
  websocket.onclose = (evt) => {
    console.log("websocket关闭:", evt);
  };
}
connectWebsocket();

// 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function () {
  websocket.close();
}
相关推荐
栗子叶1 天前
网页接收服务端消息的几种方式
前端·websocket·http·通信
栗子叶1 天前
SSE、长轮询与 WebSocket 连接资源对比及 Spring Boot 配置指南
spring boot·websocket·网络协议
softshow10261 天前
Vue3 :封装 WebRTC 低延迟视频流与 WebSocket 实时状态驱动的大屏可视化
websocket·网络协议·webrtc
克里斯蒂亚诺更新2 天前
理解即时通信Socket以及用NodeJs实现WebSocket
网络·websocket·网络协议
码农很忙2 天前
从0到1搭建实时日志监控系统:基于WebSocket + Elasticsearch的实战方案
websocket·网络协议·elasticsearch
寂寞恋上夜3 天前
异步任务怎么设计:轮询/WebSocket/回调(附PRD写法)
网络·人工智能·websocket·网络协议·markdown转xmind·deepseek思维导图
火星数据-Tina3 天前
如何构建一个支持多终端同步的体育比分网站?
大数据·前端·数据库·websocket
雨落秋垣3 天前
大屏可视化系统:WebRTC视频流与WebSocket实时数据集成方案
websocket·网络协议·webrtc
持续升级打怪中3 天前
WebSocket:从“写信”到“打电话”的实时通信革命
网络·websocket·网络协议
懒人村杂货铺4 天前
✅ WebSocket 接口从本地开发到生产部署的关键步骤与常见问题
websocket