• อัปโหลด

🔥 แชท IM ไม่มีหลุดการเชื่อมต่อ? การปฏิบัติจริงในการเชื่อมต่อ WebSocket ใหม่เมื่อขาดการเชื่อมต่อระดับโปรดักชันและการรักษาการเชื่อมต่อด้วย Heartbeat

172
0
2026-10-16 21:45:06
มีเนื้อหาที่สร้างโดย AI
1
เหรียญ
1
แชร์
💦 กำลังคุยกันสนุกๆ อยู่ดีๆ ข้อความ IM ก็ส่งไม่ออก พอดูคอนโซล—WebSocket disconnected ความผันผวนของเครือข่าย การสลับ WiFi หรือคอมพิวเตอร์เข้าสู่โหมดสลีป ล้วนอาจทริกเกอร์ให้ตัดการเชื่อมต่อได้ทั้งสิ้น หากไม่ทำระบบเชื่อมต่อใหม่เมื่อหลุดและระบบส่งสัญญาณชีพจร (Heartbeat) เพื่อรักษาการเชื่อมต่อ ผู้ใช้ทำได้แค่รีเฟรชหน้าเว็บเอง ซึ่งประสบการณ์แย่มาก ครั้งนี้จะมาแบ่งปันโซลูชันการสื่อสารแบบเรียลไทม์บน Web ระดับ Production ซึ่งรวมถึง การตรวจจับสัญญาณชีพจรเพื่อรักษาการเชื่อมต่อ + การถอยหลังแบบเอ็กซ์โปเนนเชียล (Exponential Backoff) เพื่อเชื่อมต่อใหม่ โค้ดต้นฉบับสามารถนำไปรันได้ทันที 💦 1. แนวคิดทางเทคนิค หัวใจสำคัญคือการแก้ 3 ปัญหา: 1) รู้ได้อย่างไรว่าการเชื่อมต่อขาดหาย? 2) เมื่อขาดหายแล้วจะเชื่อมต่อใหม่อย่างไร? 3) สถานะจะฟื้นฟูอย่างไรหลังจากเชื่อมต่อใหม่? 💦 2. ทำไมต้องมีระบบส่งสัญญาณชีพจรแบบสองทิศทาง (Dual-way Heartbeat)? บทความจำนวนมากพูดถึงแค่ฝั่ง Frontend ที่ตั้งเวลาส่ง PING โดยละเลยว่าฝั่ง Backend ก็ต้องส่ง PONG ด้วยเช่นกัน หาก Backend ไม่ตอบสนองต่อสัญญาณชีพจร ฝั่ง Frontend จะไม่สามารถแยกแยะระหว่าง "การเชื่อมต่อปกติ" กับ "การเชื่อมต่อขาดแล้วแต่ TCP ยังไม่รู้ตัว" ได้ ในโค้ดจึงมีการตั้งค่า heartbeatTimeout หากเกินเวลาโดยไม่ได้รับข้อความใดๆ (รวมถึง PONG) จะทำการตัดการเชื่อมต่อเชิงรุกเพื่อทริกเกอร์การเชื่อมต่อใหม่ 💦 3. ทำไมต้องใช้การถอยหลังแบบเอ็กซ์โปเนนเชียล (Exponential Backoff)? เมื่อเครือข่ายมีความผันผวน หากทำการเชื่อมต่อใหม่ทันทีอาจล้มเหลวอีกครั้ง การถอยหลังแบบเอ็กซ์โปเนนเชียลช่วยให้ฟื้นตัวได้อย่างรวดเร็ว และในขณะเดียวกันก็ป้องกันไม่ให้พายุการเชื่อมต่อ (Reconnection Storm) ไปถล่มเซิร์ฟเวอร์จนล่ม การถอยหลังแบบเอ็กซ์โปเนนเชียลหมายถึง: เช่น ช่วงเวลาการเชื่อมต่อใหม่ครั้งแรกคือ 1วินาที, ครั้งที่สองคือ 1.5 วินาที, ครั้งที่สามคือ 2.25 วินาที เป็นต้น ซึ่งช่วยให้มั่นใจว่าในกรณีที่มีผู้ใช้จำนวนมหาศาล การเชื่อมต่อใหม่จะกระจายตัวอย่างสม่ำเสมอตามความน่าจะเป็น แทนที่จะพากันส่งคำขอเข้ามาพร้อมกันในเวลาเดียว ซึ่งช่วยป้องกันไม่ให้จุดพีคชั่วขณะทำให้เซิร์ฟเวอร์ล่มได้ 💦 6. การปรับแต่งและเสริมประสิทธิภาพเพิ่มเติมสำหรับสภาพแวดล้อม Production หลักๆ มีดังนี้: 1) Page Visibility API: เมื่อหน้าเว็บถูกพับไปอยู่เบื้องหลัง ให้ลดความถี่ของสัญญาณชีพจรหรือหยุดชั่วคราว เมื่อสลับกลับมาให้ตรวจสอบสถานะการเชื่อมต่อทันที 2) การตรวจสอบสถานะเครือข่าย: ใช้ร่วมกับ navigator.onLine เมื่ออินเทอร์เน็ตหลุดให้หยุดการเชื่อมต่อใหม่ชั่วคราว และเมื่อเครือข่ายกลับมาให้เชื่อมต่อใหม่ทันที 3) การจัดการ Token หมดอายุ: หลังจากเชื่อมต่อใหม่อาจารย์ยืนยันตัวตนไม่ผ่าน จำเป็นต้องจัดการข้อผิดพลาด 401 ในอีเวนต์ onMessage และนำทางผู้ใช้ให้เข้าสู่ระบบใหม่ โซลูชันนี้ทำงานได้อย่างเสถียรในโปรเจกต์ IM หลายรายการ อัตราความสำเร็จในการเชื่อมต่อใหม่เมื่อหลุดสูงกว่า 99% คัดลอกโค้ดไปใส่ในโปรเจกต์แล้วปรับแต่งพารามิเตอร์เล็กน้อยตามธุรกิจของคุณได้เลย (👉️ อ่านบทความฉบับเต็ม: 52im.net/thread-4924-1-1.html)👈️
开源全平台即时通讯/IM框架MobileIMSDK的作者。
38K การเล่น
ข้อมูลเบื้องต้น
数据莫名其妙就爆了,鸿蒙next端即时通讯社交应用大有可为
00:10
251108-开源社区奖杯的推广
00:17
转转客服IM聊天系统背后的技术挑战和实践分享
01:51
零基础即时通讯IM开发入门(一):什么是IM聊天系统?
02:32
零基础IM开发入门:什么是IM聊天系统的实时性?
04:36
零基础IM开发入门:什么是IM聊天系统的可靠性?
06:18
零基础IM开发入门:什么是IM聊天系统的消息时序一致性
04:40
零基础IM开发入门:什么是IM聊天系统的端到端加密?
03:46
⭐️ AI大模型爆火的SSE技术到底是什么?万字长文,一篇读懂SSE!
03:02
开源IM聊天/即时通讯源码RainbowChat/纯原生
01:17
B站IM即时通讯消息系统的新架构升级实践
04:21
Web网页端即时通讯源码/IM聊天源码RainbowChat-Web
01:07
如何保障分布式IM聊天系统的消息有序性(即消息不乱)
02:57
开源即时通讯IM框架MobileIMSDK:7端+TCP/UDP/WebSocket协议,纯血鸿蒙Next端已发布
00:59
🔥 如何保障分布式IM聊天系统的消息可靠性(即消息不丢)
03:29
鸿蒙原生IM即时通讯RainbowTalk,纯ArkTS,基于开源MobileIMSDK框架
01:36
基于WebSocket的IM即时通信方案在H5游戏场景下的技术实践
03:55
开源IM即时通讯框架MobileIMSDK的纯血鸿蒙NEXT客户端库,原生ArkTS编写
00:33
企业微信的IM架构设计揭秘:消息模型、万人群、已读回执、消息撤回等
03:27
开源IM即时通讯框架MobileIMSDK的Uniapp跨平台客户端库
00:37
即时通讯安全篇(十六):对称加密 vs 非对称加密?一文搞懂
03:26
🔥 现代IM系统中聊天消息的同步和存储方案探讨
05:01
🔥 社交场景下的统一即时通讯im消息流交互层模块化技术实践
03:30
🔥 全面揭秘亿级IM即时通讯消息的可靠投递机制
06:22
🔥 微信IM聊天消息序列号生成算法技术原理
04:50
轻量级Web端IM即时通讯框架MobileIMSDK-Web,基于Socket.io库
00:48
🔥 深度揭秘钉钉即时消息服务DTIM的技术设计
04:59
🔥 แชทกลุ่ม IM เป็นพันคนควรใช้การเขียนข้อความเพื่อกระจายไหม? มาคำนวณต้นทุนอย่างละเอียดกัน
03:36
🔥 เส้นทางการวิวัฒนาการสถาปัตยกรรมระบบข้อความ IM ระดับร้อยล้านของ Xianyu
04:19
เปิดตัวเฟรมเวิร์กแชทภาพและเสียงแบบเรียลไทม์ RainbowAV v2.2.7
01:02
🔥 จะจัดเก็บข้อความออฟไลน์ IM อย่างไรดี? ตรวจสอบโซลูชันการจัดเก็บข้อมูลกระแสหลักแบบครอบคลุม
03:00
🔥 การปฏิบัติตามจริงทางเทคนิคของระบบ IM บริการลูกค้าที่พัฒนาขึ้นเองของ Dewu
04:15
🔥 IM หัวข้อเทคโนโลยีการค้นหาข้อความเต็ม: การปฏิบัติทางเทคนิคของระบบการจับคู่คำที่มีความละเอียดอ่อนของ vivo
04:26
🔥 แชท IM ไม่มีหลุดการเชื่อมต่อ? การปฏิบัติจริงในการเชื่อมต่อ WebSocket ใหม่เมื่อขาดการเชื่อมต่อระดับโปรดักชันและการรักษาการเชื่อมต่อด้วย Heartbeat
03:09
บริการลูกค้า
ด้านบน
赛事库 课堂 2021拜年纪