สร้างแอพแชทด้วย Node.js และ Socket.io ตอนที่ 1

สมันนี้ใครก็ใช้ Social Network เอาไว้ติดต่อสื่อสารกัน รวมถึงแอพแชทต่างๆ ไม่ว่าจะเป็น Messenger, Line เรามาลองสร้างแอพแชทด้วย Node.js และ Socket.io กันสักตัวดีกว่า

การติดตั้ง

• สร้างไฟล์ package.json

{
     "name": "realtime-chat",
     "version": "0.1.0",
     "devDependencies": {
          "express": "^4.12.3",
          "jade": "^1.9.2",
          "socket.io": "^1.3.5"
     }
}

• จากนั้นก็ติดตั้ง Dependency ต่างๆ

npm install

• สร้างไฟล์อื่นๆรอไว้ ตามโครงสร้างนี้

|--- app.js
|
|--- node_modules/
|     - express
|     - jade
|     - socket.io
|
|--- package.json
|
|--- public/
|     - css/
|     - main.css
|
`--- views/
      - index.jade

• เขียนโค้ดที่ app.js

var express = require('express');
var app = express();
var path = require('path');
var port = 8081;
 
var server = app.listen(port, function() {
     console.log('Listening on port: ' + port);
}); 
 
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade'); 
app.use(express.static('public'));
 
app.get('/', function(req, res) {
     res.render('index');
});

เป็นการสร้าง http server ธรรมดาๆ ที่ port 8081 ครับ และกำหนด Jade เป็น template engine กำหนดให้ Express อ่านไฟล์ static ที่โฟลเดอร์ public นะ แล้วก็ทำ route สำหรับหน้าแรกให้ไปอ่าน template ที่ไฟล์ index.jade ครับ

* ใครยังอ่านแล้วงง ผมแนะนำให้ไปศึกษา Laravel ก่อนนะครับ

• เขียนโค้ดที่ index.jade

doctype html
html
     head
          title Realtime Chat using Node.js and Socket.IO
          meta(name='viewport', content="initial-scale=1")
          link(rel='stylesheet', href='css/main.css')
     body
          div.box.box--container
               div.box.box--chat
                    ul#chat-history
                    form#chat-form(action="")
                         input.box(type="text", id="chat-message", autocomplete="off", placeholder="Enter message here...")

จะเหมือนกับการสร้างไฟล์ index.html หรือ index.php ธรรมดาทั่วไป

• เขียนโค้ดที่ main.css

* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
html {
     font-size: 62.5%;
}
body {
     background: #ccc;
     font-family: arial, san-serif;
     font-size: 1.2em;
     color: #666;
} 
.box {
     width: 100%;
     border-radius: 3px;
}
.box--container {
     max-width: 640px;
     margin: 0 auto;
     padding: 15px;
}
.box--chat {
     background: #fff;
     padding: 15px;
     border: 1px solid #eee;
}
#chat-history {
     list-style: none;
     padding: 0 0 10px 0;
     overflow: auto;
     height: 250px;
}
.message {
     background: #eee;
     padding: 10px 15px;
     border-radius: 20px;
     margin-bottom: 5px;
     float: left;
     clear: both;
}
.message--me {
     background: #B3ED7A;
     float: right;
}
#chat-message {
     background: #f5f5f5;
     padding: 10px;
     border: 1px solid #d5d5d5;
}

• ลองรัน

node app.js

ที่มา : http://goo.gl/qtiL5O