Home / Mean Stack  / Express JS  / สร้าง Real-Time LiveChat ด้วย NodeJs, Express และ Socket.io

สร้าง Real-Time LiveChat ด้วย NodeJs, Express และ Socket.io

ตัวอย่างการใช้งาน Socket.io รวมกับ NodeJs และ Express JS ในการสร้างเว็บแอพพลิเคชันประเภท Live Chat แบบ Real-Time อย่างง่าย

บทเรียนก่อนหน้านี้เราได้พัฒนา Single Page Website ด้วย ExpressJS และ NodeJS ใน

http://www.daydev.com/developer/single-page-application-node-js-and-express-js.html

รอบนี้เราจะเอาบทเรียนง่ายๆ ที่ทาง Socket.io ได้นำมาช่วยเหลือในการพัฒนาแอพพลิเคชัน Live Chat บนเว็บบราวเซอร์กัน ตามรูปแบบ Stack ทั้งหมด

เริ่มต้นให้เราเตรียมพร้อม Directory ที่เราจะทำงานขึ้นมาให้เรียบร้อยแล้ว เปิด Command Prompt หรือ Terminal ขึ้นมาครับ

ทำการทดสอบ เวอร์ชันของ npm ก่อน ด้วย

ทำการสร้าง Package.json ของเราขึ้นมาก่อน โดยคำสั่งต่อไปนี้

กรอกข้อมูลทั้งหมดลงไปตามสิ่งที่เราอยากให้เป็นครับ ในตัวอย่างของผมผมเลือกส่วนนี้

Screen Shot 2559-02-28 at 11.49.13 AM

จะได้ package.json ตามนี้ครับ

Screen Shot 2559-02-28 at 11.49.24 AM

ทำการตกลงโดย yes ซะให้เรียบร้อยแล้วต่อมาให้เราติดตั้ง ExpressJS ลงใน Project ของเราครับ โดยใช้คำสั่ง

หรือ

ระบบจะสร้าง Project ทั้งหมดที่เราต้องใช้งานในการพัฒนาแอพพลิเคชันให้โดยทันที

Screen Shot 2559-02-28 at 11.50.26 AM

ไปที่ไฟล์ index.js ใน path ‘directory/node_modules/express/’ แก้ไขโดยใส่คำสั่งต่อไปนี้

ทดสอบแอพพลิเคชันของเราว่าทำงานถูกต้องไหมโดยรันคำสั่งต่อไปนี้บน Terminal

Screen Shot 2559-02-28 at 11.56.39 AM

เปิด Browser ขึ้นมาให้วิ่งที่ http://localhost:3000

Screen Shot 2559-02-28 at 11.57.08 AM

ทดสอบคำสั่ง node index.js

สร้างไฟล์ Template ชื่อว่า index.html ขึ้นมาใหม่ใน Path เดียวกับ  index.js โดยออกแบบดังนี้

แก้ไขไฟล์ index.js ใหม่ให้เรียก Template ของ index.html ไปแสดงผลแทนหน้าแอพพลิเคชัน

รันคำสั่ง node index.js ใหม่ (กด Ctrl C ยกเลิกก่อนทุกครั้ง)

Screen Shot 2559-02-28 at 11.59.29 AM

จะได้หน้าตาดังนี้ เป็นหน้าตาของ Live Chat คือมีพื้นที่แสดงข้อความในห้องแชท และมีกล่องใส่ Text พร้อมปุ่ม Send ต่อมาให้เราติดตั้ง Socket.io เพื่อสร้าง Socket ในการรับค่า state ของ Server เวลามีการ Chat ไปมาแบบ Real-Time:

ระบบจะทำการ Generate โครงสร้างของไฟล์ Library ให้ครับ

Screen Shot 2559-02-28 at 12.00.18 PM

สร้าง Connected state ผ่าน Socket.io เราต้องมีการรับค่าว่า Client หรือหน้าจอ chat ของผู้ใช้งานพร้อมแล้ว ให้ทำการแจ้งต่อ Server ดังนั้นต้องมีการเพิ่ม connected State เข้ามาครับ ให้ไปเพิ่มที่ index.js ดังนี้

เป็นการบอกว่า หากมีหน้าต่าง Chat โผล่ขึ้นมาโดยเปิดไปที่ http://localhost:3000 จะมีข้อความบน Server ว่า connected ผ่าน Console.log

และหน้ามีการผิดหน้าต่าง chat ไปจะส่งข้อความว่า “Someone Leave the Chat” และอัพเด็ต State ของ Server ว่า ‘disconnect’ กลับไปผ่านทาง Socket

เพิ่มเติม jQuery เล็กน้อยใน index.html (หน้า Template) ก่อนปิด </body>

ทดสอบ

Screen Shot 2559-02-28 at 12.05.53 PM

เชื่อมต่อ 2 Clients

Screen Shot 2559-02-28 at 12.07.15 PM

เมื่อมีการ disconnect โดยเปลี่ยนหน้า หรือปิดหน้าต่าง

ส่วนของการส่ง ข้อความไปมาระหว่างผู้ใช้งานผ่า Socket.io บน Server State ให้เราใช้ส่วนต่อไปนี้ในการส่งข้อความไปมาครับ

เป็นการเพิ่ม State ชื่อ “chat message” ให้ Server เข้าใจและเมื่อพิมพ์อะไรไปจะส่งไปแสดงผลผ่าน Console ของ Socket ก่อน เราต้องเพิ่มหน้าการทำงานด้วย jQuery เล็กน้อยใน index.html (หน้า Template) ก่อนปิด </body>

ทดสอบโดยการส่งค่าไปมา

Screen Shot 2559-02-28 at 12.15.28 PM

ข้อความจะปรากฏบน Console log ของ ระบบ ต่อมาเราจะแสดงผลที่ส่วนของ Client แล้ว ให้ไปแก้ไขที่ index.html (หน้า Template) เพิ่ม code jQuery เข้าไปดังนี้

ทดสอบการทำงาน ส่งค่าไปมา จะมีการเขียน <li> ด้วยตัวแปร msg ที่ส่งไปมาบน Socket.io

Screen Shot 2559-02-28 at 12.22.46 PM

ทอสอบการแสดงผล และการทำงาน Real-Time Chat

ตกแต่งด้วย Material Design Lite ของ Google เล็กน้อยเพื่อความสวยงาม ไฟล์ index.html จะเป็นดังนี้

ไฟล์ index.js จะเป็นดังนี้

เราก็จะมีแอพพลิเคชัน Live Chat สวยๆ ตามภาพตัวอย่าง ลองไปทำเล่นกันดูนะครับ

Screen Shot 2559-02-28 at 12.46.25 PM

Ref: node.js, express js, socket.io

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.