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();
}
相关推荐
患得患失9492 小时前
【前端websocket】企业级功能清单
前端·websocket·网络协议
芯智工坊2 小时前
第17章 Mosquitto WebSocket支持
网络·websocket·网络协议
The_Ticker14 小时前
印度股票实时行情API(低成本方案)
python·websocket·算法·金融·区块链
2501_9216494917 小时前
低延迟量化交易数据 API:从架构设计到性能优化的完整实践指南
python·websocket·金融·量化
预立科技17 小时前
SSE、WebSocket 和 HTTP
websocket·网络协议·http·sse
AugustRed3 天前
AI流式输出方案SSE vs WebSocket对比
人工智能·websocket·网络协议
嫂子的姐夫3 天前
31-RPC技术与websocket介绍
websocket·网络协议·rpc
雨季mo浅忆4 天前
前端如何实现长连接之使用WebSocket长连接
前端·websocket
深念Y4 天前
前端实时通信技术:HTTP轮询、SSE、WebSocket、WebRTC
前端·websocket·网络协议·http·实时互动·轮询·实时通信
014-code4 天前
Nginx 反代与 WebSocket 常见坑排查清单
websocket·nginx