哎，兄弟，今天咱们聊聊怎么快速掌握 WebSocket，别紧张，老铁这事儿一点也不难。

WebSocket 就是让浏览器和服务器之间开条“永远不挂”的管道。

传统的 HTTP 是请求—响应，你要想拿数据得一次次发请求。

而 WebSocket 只要握手成功，后面就Neng双向推送，像聊天一样自然。

哈哈，这玩意儿特别适合实时弹幕、在线游戏、股票行情这些需求。

先用普通的 HTTP GET 把 Upgrade 头部设成 websocket，然后服务器返回 101 切换协议。

这一步其实就是在说：“我们Ke以直接聊了”。

Ru果你想在握手时带上 token，直接把它拼到 URL 后面就行，记得用 wss 加密哦。

var ws = new WebSocket;
ws.onopen = function  {
  console.log;
  ws.send);
};
ws.onmessage = function  {
  console.log;
};
ws.onerror = function  {
  console.warn;
};
ws.onclose = function  {
  console.log;
};

上面那段代码就算是Zui基础的模板了你照搬改改就Neng跑起来。

先别慌，Zui关键的是两件事：一是心跳保活，二是重连策略。

function startHeartbeat {
  if  clearInterval;
  window.heartbeatTimer = setInterval {
    if  {
      ws.send);
      window.pongTimeout = setTimeout {
        console.warn;
        ws.close;
      }, 5000);
    }
  }, 10000);
}
ws.onmessage = function  {
  var data = JSON.parse;
  if  clearTimeout;
};

说实话，这段代码写完后你基本Ke以确保连接不会因为网络抖动而莫名其妙挂掉。

function reconnect {
  if  {
    console.log;
    return;
  }
  var delay = Math.min * 1000);
  console.log;
  setTimeout {
    window.reconnectAttempts++;
    initWebSocket; // 重建连接
  }, delay);
}
ws.onclose = function  { reconnect; };

不对不对，这里应该把 reconnectAttempts 初始化为零，否则第一次会算错。

下面给你一个Zui小可运行的例子：

function initWebSocket {
  ws = new WebSocket;
  ws.onopen = function  {
    console.log;
    startHeartbeat;
    document.getElementById.onclick = function  {
      var txt = document.getElementById.value;
      ws.send);
    };
  };
  ws.onmessage = function  {
    var data = JSON.parse;
    if  {
      var li = document.createElement;
      li.textContent = data.from + ': ' + data.content;
      document.getElementById.appendChild;
    }
  };
  ws.onerror = function  { console.error; };
  ws.onclose = function  { reconnect; };
}
initWebSocket;

复制粘贴到你的页面里加点 CSS 美化一下就Neng跑起一个小型弹幕聊天室啦。

这个问题经常被问，其实原因hen简单：

搜索引擎爬虫默认只抓取 HTTP/HTTPS 静态内容，它们不会主动打开 WebSocket 链接。

Ru果你的页面主要靠 WebSocket 动态渲染，那搜索引擎kan到的可Neng是空白页，自然收不进来。

解决办法：提供预渲染或生成一份纯 HTML 的快照，让爬虫有东西可抓取。

hen多小伙伴直接在 URL 加 ?token=xxx，结果被日志泄漏了。建议：

使用 Cookie+HttpOnly 在握手时自动带上验证信息；

CORS 是针对 HTTP 的，而 WebSocket 升级阶段也会走同样的路径，所以服务器要在 Upgrade 时返回 Access-Control-Allow-Origin，否则前端会报跨域错误。

- Chrome DevTools> Network> WS Neng实时kan到帧内容，用来排查协议格式错误非常方便。 - Ru果消息量大，把频繁的小消息合并成批次发送，Ke以显著降低网络开销。 - 用二进制代替字符串传输，大幅提升吞吐率。比如图片、音频流就Zui好走二进制通道。

1️⃣ 理解握手流程和 Upgrade Header； 2️⃣ 实现心跳 + 自动重连； 3️⃣ 注意安全； 4️⃣ 为 SEO Zuo预渲染； 5️⃣ 用好调试工具和二进制优化。

说实话，只要把这几块敲进去，你基本上Yi经Ke以在项目里熟练玩转 WebSocket 啦。以后遇到实时需求，就直接掏出这套模板改改就行，不用每次dou从头踩坑。哈哈，有啥不懂的随时来找我聊哈！祝你玩得开心～ 😊

switch  {  
 case WebSocket.CONNECTING:    
   // do something    
   break;  
 case WebSocket.OPEN:    
   // do something    
   break;  
 case WebSocket.CLOSING:    
   // do something    
   break;  
 case WebSocket.CLOSED:    
   // do something    
   break;  
 default:    
   // this never happens    
   break;}

// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData;
var binary = new Uint8Array;
for  {  
 binary = img.data;
}
ws.send;

var data = new ArrayBuffer;
socket.send;
if  {  
 // 完毕
} else {  
 // 未完
}