JavaScript中没有原生Socket API，实际使用的是WebSocket；它基于TCP、双向实时通信，与HTTP的请求响应模式有本质区别，需用ws://或wss://协议创建连接。
JavaScript 中的 Socket 本身不是原生 API，你实际用的是 WebSocket —— 它是浏览器唯一原生支持的、真正双向、低延迟的实时通信机制。直接写 new Socket() 会报错，这是初学者最常踩的坑。
WebSocket 是什么？和 HTTP 有什么根本区别？
WebSocket 是一个独立于 HTTP 的 TCP 上层协议（虽然握手阶段复用 HTTP），建立连接后，客户端和服务端能随时互相发消息，不需要反复请求响应。而 XMLHttpRequest 或 fetch 每次都要发起新请求，本质是“半双工”。
关键区别：
- HTTP 是无状态、请求驱动；
WebSocket是有状态、事件驱动（onmessage、onopen） - HTTP 头部开销大；
WebSocket帧头仅 2–14 字节 -
WebSocket连接一旦建立，只要没断开，就一直保持，适合聊天、协同编辑、行情推送等场景
如何在浏览器中创建并使用 WebSocket？
核心就是 new WebSocket(url)，但要注意 URL 必须是 ws:// 或 wss://（不能是 http://）。
立即学习“Java免费学习笔记（深入）”；
const ws = new WebSocket('wss://echo.websocket.org'); // 公共测试地址
ws.onopen = () => {
console.log('连接已建立');
ws.send('Hello Server');
};
ws.onmessage = (event) => {
console.log('收到消息：', event.data);
};
ws.onerror = (error) => {
console.error('WebSocket 错误：', error);
};
ws.onclose = () => {
console.log('连接已关闭');
};
常见错误：
-
SecurityError: Failed to construct 'WebSocket': Invalid URL→ 检查协议是否写成http:// - 连接立刻
close→ 后端没正确响应 WebSocket 握手（比如 Express 没用ws或socket.io库） -
Failed to execute 'send' on 'WebSocket': Still in CONNECTING state→ 在onopen之前就调用了send()
为什么不用原生 WebSocket 而选 Socket.IO？
因为原生 WebSocket 不处理断线重连、心跳保活、消息确认、降级（如自动 fallback 到 long-polling）、多房间等现实问题。而 Socket.IO 是封装层，它默认仍用 WebSocket 传输，但加了协议层（叫 engine.io）。
使用差异：
- 原生：
ws.send('text')只能发字符串或ArrayBuffer -
Socket.IO：socket.emit('chat', { user: 'A', msg: 'hi' })自动序列化/反序列化，支持二进制、事件名 + 数据结构 - 服务端必须匹配：用
socket.io客户端，就必须配socket.io服务端（npm install socket.io），不能只用ws库
简单客户端示例：
const socket = io('https://your-server.com');
socket.on('connect', () => {
console.log('已连接，ID：', socket.id);
});
socket.on('chat', (data) => {
console.log('收到 chat 事件：', data);
});
socket.emit('join-room', { roomId: '123' });
连接失败时该检查什么？
不要只看控制台报错，按顺序排查：
- 浏览器地址栏确认当前页面是
https://或http://localhost——wss://不能在http://页面里用（混合内容被阻止） - 用
curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" http://your-api.com/socket手动模拟握手，看是否返回101 Switching Protocols - 服务端日志是否打印出 upgrade 请求？有没有被 Nginx / CDN 拦截了
Upgrade和Connection头？ - Chrome 开发者工具 → Network → Filter 输入
ws，点开连接查看 Headers 和 Messages 选项卡
真实项目里，90% 的“连不上”问题出在代理配置或协议不一致，而不是代码逻辑本身。
