Tag: angularjs

Socket.IO คือ การติดต่อสื่อสารกันระหว่าง client และ server ผ่านทาง websocket ในรูปแบบการเฝ้าระวังเหตุการณ์ที่จะเกิดขึ้น (event-based) แบบ  real-time ซึ่งสามารถทำงานได้รวดเร็ว จึงทำให้เป็นที่นิยมใช้กันอย่างแพร่หลาย และในบทความนี้เราจะมาเรียนรู้วิธีการการติดตั้งและใช้งาน Socket.IO ร่วมกับ ExpressJs และ AngularJS

 

ก่อนที่เราจะเริ่มต้นใช้งาน Socket.IO นั้นสิ่งที่จะต้องติดตั้งก่อนนั่นก็คือ NodeJs และ NPM (ซึ่งปกติจะติดตั้งมาพร้อมกับ NodeJs อยู่แล้ว) หลังจากติดตั้งเสร็จเรียบร้อยแล้ว

แนะนำให้ติดตั้ง express-generator ซึ่งเป็นเครื่องมือในการช่วยสร้างเว็บแอพพลิเคชั่น (เหมาะสำหรับมือใหม่)

 

การติดตั้ง express-generator ด้วย NPM

$ npm install express-generator -g

 

หลังจากติดตั้ง express-generator เรียบร้อยแล้ว เราก็จะมาทำการสร้างเว็บเซิร์ฟเวอร์ด้วยคำสั่งต่อไปนี้

$ express --view=ejs socketio-express-angularjs 
$ cd socketio-express-angularjs 
$ npm install

 

ตอนนี้เรามีเซิร์ฟเวอร์ที่พร้อมใช้งานบน NodeJs เรียบร้อยแล้วต่อไปก็คือการติดตั้ง Socket.IO ลงไปบนเซิร์ฟเวอร์ วิธีติดตั้งก็ง่ายๆ เพียงรันคำสั่งด้านล่างนี้

$ npm install socket.io --save

 

หลังจากติดตั้ง Socket.IO เรียบร้อยแล้วต่อไปก็เป็นการตั้งค่าเพื่อเรียกใช้งานบนเซิร์ฟเวอร์

ให้เปิดไฟล์ www ที่อยู่ในโฟลเดอร์ bin ด้วยโปรแกรม editor และทำการเพิ่มโค้ดด้านล่างนี้

var server = http.createServer(app);

var io = require('socket.io')(server);

io.on('connection', function (socket) {
    socket.emit('newConnection', { message: 'hi, you are connected to the socket.io' });
    
    socket.on('someInformation', function(data) {
        console.log(data);
    });
});

 

หลังจากเพิ่มโค้ดในส่วนของ Socket.IO แล้วให้ลองทำการทดสอบรันเซิร์ฟเวอร์ เพื่อให้แน่ใจว่าเซิร์ฟเวอร์ทำงานได้ปกติไม่มีเออเร่อใดๆ คำสั่งที่ใช้สำหรับรันเซิร์ฟเวอร์คือ

$ DEBUG=socket.io* npm start

 

หรือจะเพิ่มคำสั่งข้างบนเข้าไปในไฟล์ package.json ในส่วนของ scripts จะได้หน้าตาดังนี้ ซึ่งจะทำให้เราสามารถรันเซิร์ฟเวอร์ด้วยคำสั่ง `npm run dev` และก็เป็นอันเสร็จสิ้นการติดตั้ง Socket.IO ฝั่งเซิร์ฟเวอร์

"scripts": {
    "start": "node ./bin/www",
    "dev": "DEBUG=socket.io* npm start"
}

 

 

 

 

source code: https://github.com/CKitisak/socketio-express-angularjs