实践原生的html5 websoket

最新推荐文章于 2025-05-02 12:37:41 发布

原创最新推荐文章于 2025-05-02 12:37:41 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

50 篇文章

订阅专栏

HTML5

16 篇文章

订阅专栏

本文介绍如何实践原生的HTML5 WebSocket技术，通过创建WebSocket实例与服务器建立连接。当连接建立、关闭、接收到消息或发生错误时，分别进行相应的处理。此外，还展示了如何设置心跳机制来保持连接，并在断开连接后尝试重新连接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例代码：

// 创建一个Socket实例
var wsUri ="ws://192.168.1.107/webSocket/9999";
var websocket;
var interval;//心跳是给后台判断是否还要前端发送数据
function initWebSocket() {
  websocket = new WebSocket(wsUri);
  //只是打开连接
  websocket.onopen = function(evt) {
    onOpen(evt)
  };
  //关闭连接,断网会关闭一次
  websocket.onclose = function(evt) {
    console.log("close");
    //以下方法不能实现重连，会不断的创建实例
    // setTimeout(function(){
    //   initWebSocket();
    // },3000)
  };
  //只要连接成功，后台都会返回数据
  websocket.onmessage = function(evt) {
    console.log(evt.data);
  };
  //如果连接不成功（如断网了），而我们又用了“心跳”不断的往后台发数据，则都会进这个方法
  websocket.onerror = function(evt) {
    console.log('error:'+ evt.data);
    //以下方法不能实现重连，会不断的创建实例
    // setTimeout(function(){
    //   initWebSocket();
    // },3000)
  };
}

function onOpen(evt) {
  console.log("open");
  interval=setInterval(function () {//只是给后台做一个判断，检测前端是否还在连接中。
    var send_data={type:'beat'};
    var str=JSON.stringify(send_data);
      websocket.send(str);
  },5000);
}

if('WebSocket' in window){
  initWebSocket();
}