我是HullQin，公众号线下团聚游戏的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者HullQin受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。
背景
其中的联机性能，就是通过WebSocket实现的，中途也踩了一些坑，分享给大家。
ws.close()有个参数，最好填上
这个参数就是错误码，表明了敞开连贯的起因：
WebSocket断开连接时，会发送一个错误码给另一方。如果是浏览器被动断开连接，浏览器发错误码给服务器。如果是服务器断开连接，服务器发错误码给浏览器。
所有错误码可参考 MDN: CloseEvent Code。
在浏览器中，调用ws.close()函数敞开连贯时，默认错误码是1005，含意是 no status code was provided even though one was expected。
这是容易犯错的，可能很多人认为它的默认值是1000（失常敞开）。后果服务器收到的却是1005。
解决
如果前端敞开是失常敞开，你能够应用ws.close(1000)。
如果前端敞开不是失常敞开，你须要自定义一个异样错误码，范畴是4000-4999。
此外，如果你在开发一个框架，那么你可用的错误码范畴是3000-3999。
如果接管的数据是二进制，肯定要设置ws.binaryType
ws.binaryType有2种值：blob和arraybuffer。
blob是它的默认值。
如果你收到了二进制数据：当ws.binaryType为blob时，event.data是Blob类型，你须要调用await event.data.arrayBuffer()获取ArrayBuffer类型的数据。
如果你收到了二进制数据，当ws.binaryType为arraybuffer时，event.data是ArrayBuffer类型。
踩坑点
我的《联机桌游合集》刚上线时，有个应用iOS的敌人通知我，她无奈进入游戏，重试了屡次也不行。
然而我曾经用我手头的安卓、iPad、iPhone、Mac、Windows全都测试过一遍了。
通过排查，才发现是她的iOS14中Safari浏览器搞的鬼。尽管我没有设置ws.binaryType为arraybuffer，
然而因为Safari检测到是二进制数据，就间接把event.data转换为了ArrayBuffer类型，不是Blob类型，导致我调用await event.data.arrayBuffer()时出错了。
回顾过后的commit记录：
解决
如果你ws收到的数据都是二进制格局，在调用const ws = new WebSocket()后，立马设置ws.binaryType = 'arraybuffer'。
然而如果你ws可能收到二进制数据，也可能收到文本数据，倡议参考MDN官网案例，设置ws.binaryType为arraybuffer，然而加个条件判断：
const ws = new WebSocket("ws://localhost:8080");// Change binary type from "blob" to "arraybuffer"ws.binaryType = "arraybuffer";ws.onmessage = (event) => { if(event.data instanceof ArrayBuffer) { // binary frame console.log(event.data); } else { // text frame console.log(event.data); }});对于音讯合并与拆分
我在Mac环境下，应用Safari浏览器和Chrome浏览器的WebSocket，有2种不同的景象：
如果后端发送给前端的音讯中，蕴含了\n换行符。在Chrome中，会触发屡次onmessage事件，各个音讯是被Chrome基于\n宰割开了，宰割后的音讯按程序顺次触发onmessage来解决。在Safari中，只触发了一次onmessage事件，Safari没有帮咱们分隔音讯。
事实上，在WebSocket音讯中，\n换行符自身就是辨别音讯的特殊符号。如果须要短时间内间断发送多条音讯给客户端，一种常见的优化伎俩就是把这些音讯一次性发送过来，用\n宰割。
Chrome做的很好，帮咱们宰割好了。然而像Safari这种浏览器没有帮咱们宰割，为了兼容性，咱们也须要解决下。
解决
如果后端有「批量发送」的机制，就在onmessage事件中，把音讯按\n宰割后，再顺次解决。如果后端没有实现「批量发送」的机制，则能够疏忽。
ws.onmessage = (event) => { event.data.split('\n').forEach((message) => { // 解决各个message });};对于多个ws实例并发
这里的坑不是特地大，但如果你要做压力测试，那就可能会遇到坑。你须要晓得：
Chrome有个特点：如果你同时建设多个WebSocket连贯，只会一个一个建设。等前一个ws建设连贯胜利，后一个ws开始建设连贯。
如果你想测试后盾服务同时被多个客户端连贯，有无并发问题时，不要用同一个Chrome Tab来测。能够开多个Tab和多个浏览器，或者用Safari测试。
因为在Safari上：如果你同时建设多个WebSocket连贯，是同时发送ws连贯申请的（当然留神ws同时连接数有下限，做压测时，一个Tab没必要一次性连太多，是没用的）。
我在写文章《多房间的聊天室（六）为什么要加锁？不加锁行不行啊？》时，发现了这个问题。
写在最初
我是HullQin，公众号线下团聚游戏的作者（欢送关注公众号，发送加微信，交个敌人），转发本文前需取得作者HullQin受权。我独立开发了《联机桌游合集》，是个网页，能够很不便的跟敌人联机玩斗地主、五子棋等游戏，不免费没广告。还开发了《Dice Crush》加入Game Jam 2022。喜爱能够关注我 HullQin 噢～我有空了会分享做游戏的相干技术。