Node JS Tạo chat module với Socket.io
Để 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>
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) {
$(’
});
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:
Node.js cho người mới bắt đầu
Lập trình hướng sự kiện thường gây bối rối cho những người mới bắt đầu, điều đó có thể khiến cho người ta gặp khó khăn khi bắt đầu học Node.js. Nhưng đừng để cho điều đó làm bạn nản lòng; trong bài viết này, tôi sẽ dạy bạn một số kiến thức cơ bản của...
gisbookonline – 27 Oct 15
Phần 1: Cài đặt Node.js cho windows và thực thi một số ví dụ mẫu
– Sau đây là phim minh họa bước 1 đến 3:( Do phim được nhúng vào blog nên có thể chất lượng không được tốt, vui lòng bấm vào đây để xem phim với chất lượng tốt nhất). …
Toàn tập khoá học về Node : https://learnnode.com/
Chúc các bạn thành công!!!
