บทความนี้จะกล่าวถึงการ coding เพื่อทำ WebSocket ด้วย Node.js และ framework ที่ชื่อ Socket.io บน AWS EC2 เท่านั้น ไม่มีบริการอื่นเข้ามาเกี่ยวข้อง ซึ่งภาษาที่ใช้จะเป็น JavaScript ทั้งหมด
ข้อดี สามารถปรับเปลี่ยนแก้ไขการทำงานต่างๆด้วยตนเองได้ทั้งหมด
ข้อเสีย อาจต้องใช้เวลาในการเรียนเพิ่มขึ้นรู้สำหรับผู้เริ่มต้นหรือไม่มีความคุ้นเคยกับ AWS, Unix Environment และ JavaScript
สิ่งที่ต้องใช้
- Amazon Web Services(AWS) account (สอบถามการใช้งานได้ครับ)
- PuTTY (สามารถดูได้จาก บทความ "การใช้งาน PuTTY ขั้นต้น")
- FileZilla (สามารถดูได้จาก บทความ "การใช้ FileZilla ขั้นต้น")
- Node.js (download ได้ ที่นี่ เมื่อติดตั้งแล้วสามารถใช้งานได้เลยผ่านหน้า console)
- Socket.io
- Text Editor (แนะนำ Sublime หรือจะใช้ตัวอื่นก็ได้ครับ เช่น Notepad++)
Framework
Node.js [https://nodejs.org/en/]
เป็น JavaScript runtime ที่สร้างบน Chrome's V8 JavaScript engine พัฒนาโดย Google (ตามอ่านรายละเอียดได้ ที่นี่) การทำงานของ Node.js จะเป็นในลักษณะ event-driven และ non-blocking ซึ่งทำให้มันมีประสิทธิภาพและไม่หนักเครื่อง โดยมี library package มากมายที่ผู้พัฒนาจากทั่วโลกทำขึ้นมา support ในงานต่าง เราสามารถติดตั้งด้วยคำสั่ง npm และที่สำคัญคือเป็น open source
Socket.io [http://socket.io/]
เป็น JavaScript framework ที่ใช้ในการส่งข้อมูลแบบ real-time แบบ bidirectional และ เป็น event-based ที่ค่อนข้างเร็วและเสถียร แต่ Socket.io อาจจะไม่เหมาะสมกับการเชื่อมต่อหลายๆ connection (1,000+ connection) หากจำต้องใช้ WebSocket ในงานของคุณจริงๆ อาจต้อง config เพิ่มเติมหรือใช้งาน framework หรือ engine ตัวอื่นมา support ครับ
การติดตั้ง
หลังจากติดตั้ง Node.js แล้วให้ทำการเปิดหน้า console ขึ้นมาโดยกด WinKey + R พิมพ์ cmd แล้ว Enter แล้วทำการ check ว่า Node.js ใช้งานได้หรือไม่โดยพิมพ์
node -v
แสดง version ของ Node.js
ถ้า console return version ของ Node.js ได้เป็นอันใช้ได้ครับ ทำการติดตั้ง Socket.io และ Express.js โดยพิมพ์
npm install --save socket.io npm install --save expressเราใส่ --save ด้วยเพื่อที่ทำการติดตั้งลงบน directory ที่เราต้องการเท่านั้น (กรณีไม่ใส่ มันจะทำการติดตั้งไว้ที่ default path ข้อดีคือ run ได้ทุก project แต่ข้อเสียคือตอนที่นำ project ไปใช้ที่อื่น จำต้อง copy package ดังกล่าวติดไปด้วย เพื่อความสะดวกจึงใส่ option --save ไปด้วย) รอจนกระทั่งติดตั้งเสร็จ
Coding
File name : server.jsทำการ run code ฝั่ง server โดยพิมพ์คำสั่งในหน้า console ว่า// เรียกใช้ framework สำหรับ web application var express = require('express'); var app = express(); // กำหนดให้เชื่อต่อกับ server ด้วย http var http = require('http').Server(app); // ใช้งาน socket protocal ผ่านทาง http var io = require('socket.io')(http); // กำหนด port ในการเข้าถึง server var port = 8090; app.get("/", function(req, res) { res.sendFile(__dirname + '/index.html'); }); // input/output สำหรับการเข้าถึง web io.on('connection', function(socket){ // รอรับ object หรือ message ผ่าน event ชื่อ 'send-whatever' จาก client socket.on('send-whatever', function(data) { console.log('Got message : ' + data); // ส่ง object -> [ 'server received : ' ตามด้วย data ] ผ่าน event ชื่อ 'receive-whatever' ไปยัง client socket.emit('receive-whatever', 'server received : ' + data); }); }); // รอรับข้อมูลจาก client ผ่านทาง http://[host IP]:[port] http.listen(port, function(){ console.log('listening on *:' + port); });
node server.js
ตอนนี้ server จะรอรับการเชื่อมต่อจาก client เรามาดู code ฝั่ง web client กัน
File name : index.html<!DOCTYPE html> <html> <head> <!-- กำหนดคุณสมบัติของหน้า web --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- ชื่อ web --> <title>Real-Time web application</title> <!-- Library zone --> <!-- Bootstrap : Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- jQuery --> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- Bootstrap : Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <!-- Socket.io --> <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> <!-- กำหนด function การทำงานต่างๆในนี้ --> <script> // รอจนโหลดหน้า web เสร็จจึงค่อยทำ $(document).ready(function(){ // เชื่อมต่อ websocket ด้วย IP(ตัวอย่างเช่น 52.123.456.78) ของ instance บน AWS var socket = io('http://52.123.456.78:8090/'); // เมื่อกดปุ่ม 'Send' ข้อความที่ tag id 'textMsg' จะถูก get ค่าและส่งไปยัง server $("#sendBtn").click(function(){ socket.emit('send-whatever', $("#textMsg").val()); }); // รอรับการตอบกลับจาก server ผ่าน event ชื่อ 'receive-whatever' socket.on('receive-whatever', function(data){ // แล้ยวทำการเพิ่มข้อความในหน้าเว็บลงใน element id 'listMsg' $("#listMsg").append('<li class="list-group-item">' + data + '</li>'); }); }); </script> </head> <body> <!-- หน้าตา web --> <div class="wrapper"> <div class="container"> <div class="row text-center"> <div class=".col-md-4"></div> <div class=".col-md-4"> <h2>Real-Time message</h2> <div class="input-group"> <span class="input-group-btn"> <button class="btn btn-default" type="button" id="sendBtn">Send</button> </span> <input id="textMsg" type="text" class="form-control" placeholder="sending your message here..."> </div><!-- /input-group --> </div> <div class=".col-md-4"></div> </div> <div class="row text-center"> <ul id="listMsg" class="list-group"> </ul> </div> </div> </div> </body> </html>ผลลัพธ์ที่ได้คือ server จะตอบกลับ client ด้วยสิ่งเดียวกับที่ client ส่งมายัง server
ไม่มีความคิดเห็น:
แสดงความคิดเห็น