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();
}
相关推荐
小扎仙森6 天前
关于阿里云实时语音翻译-Gummy推送WebSocket
websocket·阿里云·云计算
江西理工大学小杨6 天前
高性能 C++ 社交平台4:基于 Boost.Beast 的 WebSocket 网关实现
c++·websocket·微服务
yezipi耶不耶6 天前
我在 RTMate 里使用的高并发连接管理利器: DashMap
websocket·rust
柒.梧.6 天前
基于Netty+WebSocket+DeepSeek AI 实现即时聊天功能
人工智能·websocket·网络协议
Sincerelyplz7 天前
【WebSocket】消息丢失的补偿/补发机制
后端·websocket
yuki_uix7 天前
WebSocket 连上了,然后呢?聊聊实时数据的"后半场"
前端·websocket
monkey011277 天前
webSocket Demo1
网络·websocket·网络协议
漫霂7 天前
WebSocket入门
后端·websocket
W|J7 天前
websocket 的创建使用
websocket·网络协议
mftang8 天前
WebSocket协议与其他通信协议有什么区别?
网络·websocket·网络协议