จบคู่มือนี้ แอปของคุณจะมีแชทแบบไหน?
แอปขายของ แอปเรียกช่าง หรือแอปปรึกษาแพทย์ที่ไม่มีแชทในตัว มักจบด้วยปุ่ม "แอดไลน์" แล้วการขายครั้งนั้นก็หลุดออกไปอยู่นอกระบบของคุณ คู่มือนี้เหมาะกับทีมที่มีแอป React Native และระบบล็อกอินอยู่แล้ว และอยากให้ลูกค้าคุยกับร้าน ช่าง หรือเจ้าหน้าที่ได้ในแอปเดียว
เมื่อทำครบ คุณจะได้หน้าแชทที่มีรายการข้อความ สถานะกำลังส่งและส่งไม่สำเร็จ การโหลดประวัติเมื่อเลื่อนขึ้น และ Push Notification (การแจ้งเตือนบนมือถือ) ที่กดแล้วเปิดตรงหน้าแชทนั้น เราเขียนหน้าจอเองในขั้นที่ 1–6 เพื่อให้เห็นว่า SDK ทำงานอย่างไร และแสดงทางลัดด้วย UIKit ในขั้นที่ 7 ถ้าสนใจว่าผู้ใช้ไทยคาดหวังฟีเจอร์แชทอะไรบ้าง อ่าน 7 ฟีเจอร์แชทในแอปที่ผู้ใช้ไทยคาดหวัง ก่อนเริ่มได้
ต้องเตรียมอะไรก่อนเขียนโค้ดบรรทัดแรก?
React Native 0.75 ขึ้นไป พร้อม Android Studio และ Xcode รันแอปบนเครื่องได้แล้ว
ระบบล็อกอินของแอปคุณ และเซิร์ฟเวอร์ที่เพิ่ม endpoint ได้หนึ่งตัว สำหรับสร้าง UserSig
บัญชี Tencent RTC Chat และ SDKAppID ขอบัญชีทดลองใช้ฟรี 28 วันได้จาก ฟอร์มด้านล่าง และแพ็กเกจฟรีรองรับ MAU (ผู้ใช้ที่ใช้งานต่อเดือน) ได้ 1,000 คนตลอดไป
บัญชีนักพัฒนา Apple และ Firebase สำหรับใบรับรอง APNs และ FCM ในขั้นที่ 6
มือถือจริง 2 เครื่อง เพราะตัวจำลองส่วนใหญ่รับ Push Notification ไม่ได้
ไม่ต้องมีความรู้ WebSocket หรือการทำเซิร์ฟเวอร์แชท เพราะ SDK จัดการการเชื่อมต่อ การส่งซ้ำเมื่อเน็ตหลุด และการเก็บข้อความให้ทั้งหมด
แชทในแอปทำงานอย่างไร ทำไมต้องมีเซิร์ฟเวอร์ของคุณด้วย?
แชทในแอปมีสามส่วน ส่วนแรกคือแอป React Native ของคุณ ทำหน้าที่แสดงหน้าแชท ส่งข้อความ และฟังข้อความใหม่ ส่วนที่สองคือเซิร์ฟเวอร์ของคุณ ทำหน้าที่เดียวในเรื่องแชท คือยืนยันว่าผู้ใช้ล็อกอินแล้วจริง และสร้าง UserSig ให้ ส่วนที่สามคือ Tencent RTC Chat ซึ่งเป็นเหมือนที่ทำการไปรษณีย์ที่ไม่เคยปิด รับข้อความจากเครื่องหนึ่ง ส่งต่อให้อีกเครื่อง เก็บสำเนาไว้บนคลาวด์ และส่งแจ้งเตือนผ่าน APNs หรือ FCM เมื่อผู้รับปิดแอปอยู่
การแบ่งแบบนี้ทำให้เซิร์ฟเวอร์ของคุณไม่ต้องรับภาระข้อความเลย ไม่ต้องดูแลการเชื่อมต่อค้างไว้หลายหมื่นเส้น และไม่ต้อง Scale (ขยายรองรับผู้ใช้) เองช่วงแคมเปญ ระบบ Chat ของ Tencent ส่งข้อความสำเร็จ 99.99% และรองรับผู้ใช้กว่าพันล้านคนต่อเดือน (ข้อมูลจาก trtc.io ณ ต.ค. 2026)
ลำดับเหตุการณ์เป็นแบบนี้: ผู้ใช้ล็อกอินเข้าแอปตามปกติ แอปขอ UserSig จากเซิร์ฟเวอร์ แอปเรียก login ของ Chat SDK เมื่อผู้ใช้กดแชทกับร้าน แอปเปิด Conversation ด้วย userID ของร้าน ส่งข้อความ แล้ว Chat ส่งให้ร้านทันทีถ้าร้านเปิดแอปอยู่ หรือส่งแจ้งเตือนถ้าปิดอยู่ ถ้ายังลังเลว่าจะทำเซิร์ฟเวอร์แชทเองหรือใช้ SDK ดูตัวเลขจริงได้ที่ ต้นทุนสร้างแชทเองเทียบกับใช้ SDK
ทำอย่างไรให้แชทแรกคุยกันได้ใน 7 ขั้น?
โค้ดขั้นที่ 3–5 วางในหน้าจอแชทไฟล์เดียวได้ เช่น ChatScreen.js ส่วนขั้นที่ 2 และ 6 อยู่ในไฟล์กลางที่เรียกหลังล็อกอิน
เพิ่ม Chat SDK ลงในโปรเจกต์ React Native ที่มีอยู่ ไม่ต้องสร้างโปรเจกต์ใหม่ SDK ตัวนี้เป็น JavaScript ใช้ได้ทั้ง iOS และ Android จากโค้ดชุดเดียว ฝั่ง iOS ให้รัน pod install หลังติดตั้งทุกครั้ง
ผลที่ควรเห็น: รัน npx react-native run-android และ run-ios ได้ตามปกติ และ import @tencentcloud/chat กับ tim-upload-plugin ได้โดยไม่มี error
สร้าง instance ของ Chat SDK เพียงตัวเดียวแล้วใช้ทั้งแอป จากนั้นล็อกอินเข้า Chat ทันทีหลังผู้ใช้ล็อกอินเข้าแอปของคุณสำเร็จ โดยขอ UserSig (รหัสยืนยันตัวตนของผู้ใช้) จากเซิร์ฟเวอร์ของคุณ ใช้ userID เดียวกับระบบสมาชิกเดิม ไม่ต้องสร้างบัญชีใหม่
ผลที่ควรเห็น: ใน log เห็นข้อความ "Chat SDK พร้อมใช้งาน" หลังล็อกอิน
แชท 1:1 ไม่ต้องสร้างห้องล่วงหน้า แค่รู้ userID ของอีกฝ่ายก็คุยได้ทันที Conversation (บทสนทนา) จะถูกสร้างอัตโนมัติเมื่อมีข้อความแรก ปุ่ม "แชทกับร้าน" หรือ "ติดต่อไรเดอร์" ในแอปของคุณจึงแค่ส่ง peerID เข้ามาที่หน้าแชท
ผลที่ควรเห็น: กดปุ่มแชทจากหน้าสินค้าแล้วเข้าหน้าแชทที่ถูกคน และตัวเลขข้อความที่ยังไม่อ่านหายไป
ข้อความทุกแบบสร้างก่อนแล้วค่อยส่ง ข้อความตัวอักษรใช้ createTextMessage รูปภาพ ไฟล์ และเสียงมีคำสั่งแยกแต่ส่งด้วย sendMessage เหมือนกัน ฝั่งรับให้ฟังเหตุการณ์ MESSAGE_RECEIVED ไว้ตลอดเวลาที่หน้าแชทเปิดอยู่
ผลที่ควรเห็น: พิมพ์จากเครื่องหนึ่งแล้วข้อความขึ้นอีกเครื่องทันทีโดยไม่ต้องรีเฟรชหน้าแชท
เมื่อเปิดหน้าแชท ให้โหลดข้อความล่าสุดก่อน แล้วโหลดเพิ่มทีละชุดเมื่อผู้ใช้เลื่อนขึ้น ใช้ FlatList แบบ inverted เพื่อให้ข้อความใหม่อยู่ด้านล่างเหมือนแอปแชททั่วไป SDK เก็บประวัติไว้บนคลาวด์ ผู้ใช้เปลี่ยนเครื่องก็ยังเห็นแชทเดิม
ผลที่ควรเห็น: เปิดหน้าแชทแล้วเห็นข้อความล่าสุดทันที และเลื่อนขึ้นแล้วข้อความเก่าโหลดต่อโดยไม่กระตุก
ถ้าผู้ใช้ปิดแอปแล้วไม่รู้ว่ามีข้อความใหม่ แชทก็แทบไม่มีประโยชน์ ตั้งค่าใบรับรอง APNs และ FCM ใน Console ก่อน จากนั้นลงทะเบียน device token หลังล็อกอิน และใส่ข้อความแจ้งเตือนตอนส่ง ในไทยควรรองรับ push ของมือถือจีนด้วย เพราะ Android หลายยี่ห้อตัดการแจ้งเตือนผ่าน FCM เมื่อแอปอยู่เบื้องหลัง
ผลที่ควรเห็น: ปิดแอปบนเครื่องหนึ่ง ส่งข้อความจากอีกเครื่อง แล้วเห็นแจ้งเตือนภายในไม่กี่วินาที กดแล้วเปิดตรงหน้าแชทนั้น
ถ้าทีมอยากได้หน้าจอแชทพร้อมใช้ภายในวันเดียว UIKit (หน้าจอสำเร็จรูป) มีรายการแชท หน้าแชท ช่องพิมพ์ ส่งรูป อีโมจิ และสถานะอ่านแล้วครบ ปรับสีและฟอนต์ให้ตรงแบรนด์ได้ เหมาะกับทีมที่อยากทดสอบตลาดก่อนลงแรงออกแบบหน้าจอเอง
ผลที่ควรเห็น: เปิดหน้าจอ ChatScreen ที่ได้จากคู่มือ UIKit แล้วเห็นหน้าแชทพร้อมช่องพิมพ์ข้อความ โดยไม่ต้องเขียนหน้าจอเอง
รู้ได้อย่างไรว่าแชทพร้อมให้ลูกค้าใช้จริง?
ล็อกอินเครื่องแรกด้วย
user_01และเครื่องที่สองด้วยshop_0042ส่งข้อความสลับกันอย่างน้อย 20 ข้อความ แล้วปิดและเปิดหน้าแชทใหม่ เช็กว่าประวัติครบและไม่มีข้อความซ้ำ
ปัดแอปปิดบนเครื่องหนึ่ง ส่งข้อความจากอีกเครื่อง แล้วกดแจ้งเตือนให้เปิดแอป
ระหว่างพิมพ์ ปิด Wi-Fi ให้เหลือ 4G หรือเปิดโหมดเครื่องบินสั้น ๆ แล้วเช็กว่าข้อความที่ค้างถูกส่งเมื่อเน็ตกลับมา
ทดสอบแจ้งเตือนบน Android อย่างน้อยหนึ่งเครื่องที่ไม่ใช่ Samsung หรือ Pixel
ล็อกอินไม่ได้ ข้อความซ้ำ แจ้งเตือนไม่ขึ้น แก้อย่างไร?
อาการ | สาเหตุที่พบบ่อย | วิธีแก้ |
|---|---|---|
ล็อกอินไม่ผ่าน | UserSig หมดอายุ หรือสร้างจาก userID อื่น | สร้าง UserSig ใหม่ให้ตรงกับ userID และตรวจ SDKAppID (รหัส 70001 = UserSig หมดอายุ, 70013 = userID ไม่ตรงกับ UserSig) |
เรียก API แล้วไม่มีอะไรเกิดขึ้น | เรียกก่อน SDK_READY | รอเหตุการณ์ SDK_READY ก่อนเปิดหน้าแชท ตามขั้นที่ 2 |
ข้อความขึ้นซ้ำสองครั้ง | ลงทะเบียน MESSAGE_RECEIVED ทุกครั้งที่เข้าหน้าแชท แต่ไม่ off | off listener ใน cleanup ของ useEffect ตามขั้นที่ 4 |
ประวัติไม่โหลดเมื่อเลื่อนขึ้น | ไม่ได้ส่ง nextReqMessageID หรือไม่ได้ใช้ inverted | ตรวจโค้ดขั้นที่ 5 |
แจ้งเตือนไม่ขึ้นบน iOS | ใบรับรอง APNs เป็นแบบ Development แต่แอปเป็น Production หรือกลับกัน | อัปโหลดใบรับรองให้ตรงประเภทใน Console |
แจ้งเตือนไม่ขึ้นบน Android บางยี่ห้อ | ยี่ห้อนั้นจำกัดแอปเบื้องหลัง และยังไม่ได้ตั้งค่า push ของผู้ผลิต | ตั้งค่า push ของ OPPO, vivo, Xiaomi, Huawei ใน Console |
เคล็ดลับ: ระหว่างพัฒนาให้ตั้ง setLogLevel(0) และพิมพ์ทุกเหตุการณ์จาก SDK ลง log จะเห็นทันทีว่าข้อความติดอยู่ที่ฝั่งส่งหรือฝั่งรับ ถ้ายังแก้ไม่ได้ ส่ง log และรุ่นมือถือมาให้ทีมเรา วิศวกรไทยของเราติดต่อกลับภายใน 2 วันทำการ
ก่อนเปิดให้ลูกค้าทั้งหมดใช้ ต้องทำอะไรต่อ?
สร้าง UserSig ฝั่งเซิร์ฟเวอร์เท่านั้น ขั้นที่สำคัญที่สุดก่อนขึ้นจริง คู่มือ UserSig
เปิดระบบกรองข้อความ กันสแปม คำหยาบ และการส่งเบอร์โทรเพื่อพาลูกค้าออกนอกแอป
วางนโยบายเก็บข้อความตาม PDPA ระยะเวลาเก็บ ใครเข้าถึงได้ และการลบเมื่อผู้ใช้ขอ อ่านเพิ่มที่ TRTC กับ PDPA และความปลอดภัย
เพิ่มวิดีโอคอลในหน้าแชทเดียวกัน ใช้บัญชีเดียวกับ Chat: TRTC หรือดูตัวอย่างโค้ดใน คู่มือวิดีโอคอล Flutter
Frontyr's take
สองจุดที่ผมให้ทีมเช็กก่อนเปิดแชทใน React Native คือข้อความขึ้นซ้ำเพราะลงทะเบียน listener ทุกครั้งที่เปิดหน้าแชทแต่ไม่ off และแจ้งเตือนที่ไม่ถึงผู้ใช้ Android บางยี่ห้อที่ปิดแอปเบื้องหลังเพื่อประหยัดแบต ผมแนะนำให้ทดสอบ push บน OPPO หรือ vivo อย่างน้อยหนึ่งเครื่องก่อนส่งแอปขึ้นสโตร์
Bank, CTO · Frontyr Digital
ใช้กับ Expo ได้ไหม?
ทำแชทกลุ่มได้ไหม?
คิดค่าบริการอย่างไร?
ส่งรูปและไฟล์ได้ไหม?
ใช้คู่กับวิดีโอคอลได้ไหม?
อ้างอิง: เอกสาร Tencent RTC Chat SDK (Web/React Native) https://trtc.io/document/48865 · ตัวเลขระบบ Chat จาก trtc.io ณ ต.ค. 2026 https://trtc.io/products/chat · โค้ดตัวอย่าง https://github.com/TencentCloud/chat-demo-react-native
