HTML5 WebSocket技术使用详解：超详细实战教程新手一看就会

先把WebSocket的“底层逻辑”掰碎了讲——别再被专业词吓住

很多新手一看到“全双工通信”“长连接”这些词就头大，我当初也是这样。其实你只要记住一个类比：HTTP是“打电话”，你问一句对方答一句；WebSocket是“打开对讲机”，两边能同时说话，不用挂了再打。比如你做直播弹幕，观众发一条评论，服务器得立刻推给所有在线用户——如果用HTTP，就得让每个用户每隔1秒发一次请求问“有没有新弹幕”，1000个用户就是1000次请求/秒，服务器肯定扛不住；但用WebSocket，只要用户和服务器建立一次连接，服务器就能直接把新弹幕“推”给所有用户，不用用户反复问，效率高十倍都不止。

我之前帮那个美食博主调整的时候，他还问：“那什么时候该用WebSocket啊？”我给他 了3个场景，你也可以对照看：

至于专业概念，比如MDN文档里说的“WebSocket协议基于TCP”“默认端口80/443”，你不用记那么细——反正浏览器已经帮你封装好了API，你只要会调用就行。我当初学的时候，特意查了MDN的WebSocket指南（链接：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket rel=”nofollow”），里面写得很全，但我给你摘了最有用的部分：WebSocket只需要一次HTTP握手，之后就能保持连接一直通信——这就是它比HTTP轮询高效的核心原因。

从0到1写WebSocket实战代码——每一步都给你标清楚“坑在哪”

说了这么多，直接上代码——我把我帮朋友写的实时评论功能代码拆成4步，每一步都加了“新手容易踩的坑”提醒，你跟着敲就行。

第一步：创建WebSocket实例——别把协议写错了！

代码就一行：var socket = new WebSocket('ws://your-server-url');

这里要注意两个点：

第二步：监听连接状态——知道“有没有连上”很重要

WebSocket有几个核心事件，你得先监听，不然根本不知道程序在干嘛：

我写的代码是这样的：

socket.onopen = function(e) {
 console.log('连接成功啦！');
 // 可以在这里给用户显示“已连接”提示
};
socket.onerror = function(e) {
 console.error('出错了：' + e.message);
 // 比如弹个提示“连接失败，请刷新重试”
};
socket.onclose = function(e) {
 console.log('连接关闭了：' + e.code);
 // 如果你想实现“自动重连”，可以在这里加个定时器重新创建实例
 // 比如setTimeout(() => { socket = new WebSocket(url); }, 1000);
};

坑提醒：我之前帮一个教育机构做在线答题卡功能时，遇到过“连接突然断开”的问题——后来发现是服务器超时设置太短，所以我加了自动重连逻辑，但要注意别无限重试（比如最多试5次），不然服务器会被刷爆。

第三步：发送消息——别等“连接成功”前发！

很多新手刚创建实例就急着发消息，结果发不出去——因为WebSocket是“异步连接”，得等onopen触发后才能发。比如你要发一条评论，代码应该写在onopen里面，或者确认连接成功后再调用：

// 正确的写法：等连接成功后发消息
socket.onopen = function(e) {
 socket.send('我想吃你家的红烧肉！'); // 发送字符串消息
};
// 也可以发二进制数据（比如图片、文件）
// 比如把图片转成Blob对象发送：
var file = document.getElementById('file-input').files[0];
socket.send(file);

坑提醒：我之前帮朋友测试的时候，他急着在new WebSocket之后立刻send，结果控制台报“连接未打开”的错——记住，一定要等onopen触发！

第四步：接收服务器消息——把“消息”变成用户能看懂的内容

服务器发过来的消息会触发onmessage事件，你可以在这里把消息显示在页面上（比如弹幕列表里）。代码长这样：

socket.onmessage = function(e) {
 console.log('收到服务器消息：' + e.data);
 // 比如把消息加到评论列表里
 var comment = document.createElement('div');
 comment.innerText = e.data;
 document.getElementById('comment-list').appendChild(comment);
};

这里要注意，e.data可能是字符串、Blob或者ArrayBuffer——如果是Blob（比如图片），你得转成URL才能显示：

socket.onmessage = function(e) {
 if (e.data instanceof Blob) {
 var url = URL.createObjectURL(e.data);
 var img = document.createElement('img');
 img.src = url;
 document.body.appendChild(img);
 } else {
 console.log('收到文本消息：' + e.data);
 }
};

新手最常踩的5个坑——我帮你整理成“排查表”

我帮朋友和读者解决WebSocket问题时，发现大家踩的坑都差不多，特意整理了一张新手常见错误排查表，你遇到问题可以直接对照找原因：

其实WebSocket真的没你想的那么难——我当初从“完全不懂”到“能帮人做功能”，也就花了3天时间，关键是别害怕写代码，踩过的坑记下来就行。比如你现在可以立刻用ws://echo.websocket.org这个测试地址试一下：创建实例、发一条消息，服务器会原样返回——你会看到控制台打印出你发的内容，那种“我居然写成了”的成就感，比看10篇理论文章都管用。

要是你按这些步骤试了，或者遇到了没提到的问题，欢迎在评论区告诉我——我帮你一起排查，就像我帮朋友解决问题那样。 实战才是学会WebSocket最快的方法，对吧？

WebSocket和HTTP有什么不一样啊？

其实你可以这么类比，HTTP是“打电话”，你问一句对方答一句；WebSocket是“打开对讲机”，两边能同时说话，不用挂了再打。比如做直播弹幕，用HTTP得让每个用户每隔1秒发一次请求问“有没有新弹幕”，1000个用户就是1000次请求/秒，服务器扛不住；但用WebSocket，只要建立一次连接，服务器就能直接把新弹幕“推”给所有用户，不用反复问，效率高十倍都不止。

什么时候应该用WebSocket啊？

我帮朋友 过3个场景，你可以对照看：需要实时更新的内容，比如直播弹幕、实时库存、在线协作文档；需要双向互动的功能，比如即时聊天、两人对战的五子棋这种在线游戏；还有不想让服务器“太累”的场景，比如高并发的实时监控dashboard。这些情况用WebSocket比HTTP轮询高效多了。

创建WebSocket实例时协议写错了怎么办？

首先得记住，WebSocket的协议必须是ws或wss，ws是未加密的（类似HTTP），wss是加密的（类似HTTPS）。我第一次帮朋友写的时候，他把url写成http://xxx，结果控制台直接报错“协议错误”，后来改成ws://或者wss://就好了。你要是不确定，先检查url的开头对不对。

发送消息没反应是怎么回事啊？

很大可能是你在onopen触发前就发消息了！WebSocket是异步连接的，得等连接成功（也就是onopen事件触发）之后才能send。我之前帮朋友测试的时候，他急着在new WebSocket之后立刻发消息，结果控制台报“连接未打开”的错，后来把send放在onopen里面就解决了。

WebSocket连接突然断开了该怎么办？

先找原因，可能是服务器超时设置太短，或者网络波动。我帮教育机构做在线答题卡的时候遇到过这问题，后来加了自动重连逻辑——在onclose事件里加个定时器，比如setTimeout(() => {重新创建WebSocket实例}, 1000)，但要注意别无限重试，最多试5次，不然服务器会被刷爆。你也可以在onclose里打印错误码，看看具体是啥原因。

YUANLEISVIP

收藏 链接