Node JS Tạo chat module với Socket.io

Maya_Hoang · May 8, 2017, 8:42pm

Để bắt đầu với ứng dụng, sử dụng Google Chrome, Bracket.io (https://github.com/jugonzal/gitbook-node-chat-tutorial/blob/master/content/setup/brackets.md) hay PhpStorm với công cụ nào bạn có để tạo web.
Node.js là một chương trình chạy mã JavaScript ở phía máy chủ (server-side), với ngôn ngữ Javascript không thôi thì chỉ viết cho client-side browser. Để code cho web server bạn có thể tải NodeJS trên website : nodejs.org.
Trong trường hợp bạn không thể cài đặt Node trên máy của bạn, bạn có thể sử dụng công cụ Cloud9.io

Bước 1: Chuẩn bị project, tạo folder project đặt tên chat-app hay đặt tên bạn muốn, rồi tạo file index.html và main.css

Trong phần body của html, tạo form:

< main>
< ol id=“chattext”>
< /ol>
< form>
< input id=“initials”>
< input id=“message”>
< button>Send
< /form>
< /main>

Screen Shot 2017-05-06 at 1.13.50 PM.png1152×720 12 KB

Thiết kế giao diện như thế nào thì bạn có thể tự do sáng tạo. Mình có 1 mẫu ở đây : https://codepen.io/MayaHoang/details/wdeQWv/

Bước 2: thêm thư viện jQuery vào phần và script Javascript vào phần sau cùng trong body web của bạn.

Tạo 1 file app.js, file này chạy trên client-side. Để chắc chắn Javascript bạn chạy, thử với dòng code này trong file app.js, bạn chạy ứng dụng web để xem.
alert(‘JS file chạy thành công’);
Cấu trúc lại project như sau:

Viết code cho submit form bằng Javascript :
$(‘form’).submit(function () {
var text = $(’#message’).val();
var user = $(’#initials’).val();
socket.emit(‘message’, user +’ say: ‘+ text);
$(’#message’).val(’’);
return false;
});

Bước 3: tạo file server.js cho server side. Chạy code để kiểm tra việc chạy server
console.log(‘hello server Node’);
Mở Terminal app trên MacOS hay cmd.exe trên Window, di chuyển vào thư mục project của bạn với lệnh cd (ví dụ: cd /App/chat-app), và chạy file với lệnh node server.js bạn sẽ nhận được message : “hello server Node”
Vậy là bạn thành công với tạo server với NodeJS.

Bước 4: tạo modules Express, hỗ trợ handling HTTP. Ứng dụng chat của bạn cần lắng nghe những yêu cầu từ HTTP và gửi đi cho HTML, CSS và JavaScript phía client-side.
Tạo file package.json, để project của bạn có thể làm việc với những thư viện khác sử dụng lệnh : npm init -y
Tạo thư viện Express với dòng lệnh : npm install express

Wow… nào chạy code file server.js :

var express = require(‘express’);
var app = express();
var http = require(‘http’);
var server = http.Server(app);
app.use(express.static(‘client’));
server.listen(8080, function() {
console.log(‘Chat server running’);
});

Lệnh chạy code bằng command line : node server.js
Kết quả được: “Chat server running”

Bước 5: phần quan trọng hoàn thành ứng dụng : Socket.io, dành cho Real-Time Messaging. Check it out here: http://socket.io/. Để cài đặt bằng lệnh :
npm install socket.io

Thêm script vào web index.html, trước script app.js:

Giờ chạy trình duyệt web: http://localhost:8080
Phần code cho app.js:
var socket = io();

// $(‘form’).on(‘submit’,function(){
$(‘form’).submit(function () {
var text = $(’#message’).val();
var user = $(’#initials’).val();
socket.emit(‘message’, user +’ say: ‘+ text);
$(’#message’).val(’’);
return false;
});
socket.on(‘message’, function (msg) {
$(’

’).text(msg).appendTo(’#chattext’);
});

Phần code cho server.js :
var server = http.Server(app);

app.use(express.static(‘client’));

var io = require(‘socket.io’)(server);
var history = [];

io.on(‘connection’, function (socket) {
history.forEach(function (msg) {
socket.emit(‘message’,msg);
});
socket.on(‘message’, function (msg) {
history.push(msg);
io.emit(‘message’, msg);
});
});

server.listen(8080, function() {
console.log(‘Chat server running’);
});

Tham khảo thêm:
https://techmaster.vn/posts/33448/nodejs-cho-nguoi-moi-bat-dau

Toàn tập khoá học về Node : https://learnnode.com/

Chúc các bạn thành công!!!