วิธีสร้างแอปแชทแบบเรียลไทม์ด้วย Flutter และ Node.js

ส่วนหน้า Flutter ตรงกับแบ็กเอนด์ Node.js

ในบล็อกนี้ เราจะดูวิธีสร้างแอปแชทแบบเรียลไทม์โดยใช้ Node.js เป็นแบ็กเอนด์และ Flutter เป็นส่วนหน้า เราจะใช้ซ็อกเก็ตเพื่อสื่อสารระหว่างอุปกรณ์

Node.js (ฝั่งเซิร์ฟเวอร์)

มาสร้างโปรเจ็กต์ใหม่ชื่อ chat_server และเปิดใช้งานใน Terminal กัน ตอนนี้รันคำสั่งนี้เพื่อเริ่มโปรเจ็กต์:

touch index.js && npm init && npm install ws && npm install express

นี่จะติดตั้งโปรเจ็กต์ให้คุณโดยสมบูรณ์ เมื่อดำเนินการเสร็จแล้วให้เปิดโปรเจ็กต์ใน IDE ที่คุณชื่นชอบแล้วเปิดไฟล์ index.js ของคุณ

นี่คือเซิร์ฟเวอร์ Websocket พื้นฐานของเราที่ไม่ได้ทำอะไรมากนักในตอนนี้ มาเปลี่ยนกันตอนนี้เลย

นี่จะเป็นการเรียกใช้ข้อความของคุณโดยสมบูรณ์! เมื่อเสร็จแล้วเราสามารถเริ่มด้วยแอปแชท Flutter ของเราได้เลย

กระพือ (ฝั่งไคลเอ็นต์)

ตอนนี้เราเสร็จสิ้นแบ็กเอนด์แล้ว เพื่อเริ่มใช้งานแอปแชทใน Flutter ได้ รันคำสั่งนี้เพื่อเริ่มโปรเจ็กต์ Flutter ใหม่ของเรา:

flutter create chat_app && cd chat_app && flutter run

เปิดโครงการนี้ใน IDE ของคุณ และเปิดไฟล์ pubspec.yaml ของคุณ แล้วเราจะเพิ่ม web_socket_channelตรวจสอบให้แน่ใจว่ามีลักษณะดังนี้:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  web_socket_channel: ^2.1.0 # Add this.
  sqflite: ^2.0.2 # And this.

หากต้องการเริ่มโครงการของเรา ให้ลบทุกอย่างใน lib/main.dart และอย่าลืมใส่สิ่งนี้:

ตอนนี้เรามาสร้างไฟล์ใหม่ชื่อ messages.dart ซึ่งเราจะจัดเก็บข้อความ เนื่องจากเราจะจัดเก็บข้อความของเราไว้ในเครื่อง เราจึงสร้างฟังก์ชันขึ้นมาก่อน

รหัสมันเยอะใช่มั้ยล่ะ? สิ่งที่ฟังก์ชั่นนี้ทำคือการดึงทุกข้อความในฐานข้อมูลของเรา จากนั้นจะตรวจสอบว่าคุณส่งหรือรับข้อความหรือไม่

หากทำเสร็จแล้วสุดท้ายเราจะแสดงข้อความ ตอนนี้เราจะสร้างฟังก์ชันอื่นใน messages.dart ที่จะส่งข้อความไปยังเซิร์ฟเวอร์ของเราและแทรกข้อความใหม่ลงในฐานข้อมูลของเรา

ฟังก์ชั่นนี้จะเก็บข้อความที่เราจะส่ง เมื่อเสร็จแล้วเราจะสร้างเพจเพื่อแสดงข้อความเหล่านี้

เราจะเรียกหน้านี้ว่า chat_page.dart และจะมีลักษณะเช่นนี้ก่อน

ตอนนี้เพื่อรับข้อความที่เราต้องการสร้างฟังก์ชันสำหรับสิ่งนั้น เราจะเรียกใช้ฟังก์ชันของเราgetMessage() ซึ่งจะเชื่อมโยงตัวเรากับเซิร์ฟเวอร์และฟังข้อความใดๆ และถ้ามีข้อความเราก็จะแสดงข้อความนั้นด้วย

เพียงเท่านี้คุณก็ได้สร้างแอปแชทเรียบร้อยแล้ว ตอนนี้ให้รันแอปด้วยอุปกรณ์ท้องถิ่นสองเครื่องเพื่อดูว่าใช้งานได้หรือไม่ หากไม่ได้ผลโปรดแจ้งให้เราทราบและเราจะช่วยคุณ ขอบคุณที่อ่าน.