Trước khi cài đặt socket.IO bạn phải chắc chắn rằng thiết bị của mình đã cài đặt Node.js và NPM .
Để kiểm tra các bạn có thể chạy các lệnh sau node --version
npm --version
Phạm Đình Nam –Trường Caođẳng nghề Đà Lạt Trang 58 Tiếp theo các bạn hãy tạo ra cho mình một thư mục để lưu trữ các ví dụ của
mình. Ở đây tôi sẽ sử dụng thư mục socket.io-test và đồng thời cũng tạo ra
file package.json ở trong thư mục bằng lệnh. npm init
Bây giờ chúng ta cần phải cài đặt Express và Socket.IO.
Để cài đặt chúng hãy nhập lệnh sau vào command của bạn tại thư mục gốc của dự án.
npm install express socket.io
Ứng dụng Hello World
Tạo một tệp với tên app.js và đưa đoạn mã sau để thiết lập ứng dụng.
const express = require('express'); const app = express();
const server = require('http').Server(app); app.get('/', function(request, response){
response.sendFile(__dirname + '/index.html'); });
server.listen(8000, function(){
console.log(`Lắng nghe trên cổng 8000`); });
Tiếp theo, chúng ta tạo tệp index.html với nội dung sau.
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello World</title>
</head> <body>
<h1>Hello World</h1> </body>
Phạm Đình Nam –Trường Caođẳng nghề Đà Lạt Trang 59 </html>
Để kiểm tra xem ứng dụng này có hoạt động hay không, các bạn vào command
tại thư mục gốc của project và chạy lệnh. Sau đó vào http://localhost:8000 để kiểm tra.
node app
Bây giờ tôi sẽ yêu cầu module Socket.IO và mỗi khi có người kết nối tới ứng dụng sẽ hiện thị “Người dùng đã kết nối tới ứng dụng” và “Người dùng ngắt kết nối” mỗi khi có người dùng đóng ứng ụng.
File app.js
const express = require('express'); const app = express();
const server = require('http').Server(app); const io = require('socket.io')(server) app.get('/', function(request, response){
response.sendFile(__dirname + '/index.html'); });
io.on('connection', function(socket){
console.log('Người dùng đã kết nối tới ứng dụng') socket.on('disconnect', function(){
console.log('Người dùng đã ngắt kết nối tới ứng dụng'); })
});
server.listen(8000, function(){
console.log(`Lắng nghe trên cổng 8000`); });
require('socket.io')(server) tạo ra một cá thể socket.io gắn với máy chủ http.
Trình xử lý sự kiện io.on xử lý kết nối (connection), ngắt kết nối (disconnection) v.v.
Các sự kiện trong đó sử dụng đối tương socket.
Ở trên tôi đã thiết lập máy chủ để ghi nhật ký các thông báo khi người dùng kết nối tới ứng dụng, và khi người dùng rời khỏi ứng dụng.
Bây giờ chúng ta phải yêu cầu script ở phía máy khách và khởi tạo đối tượng socket ở đó, để các máy khách có thể thiết lập các kết nối khi được yêu cầu.
Tập tin được sử dụng bới máy chủ socket.io là „/socket.io/socket.io.js„
Phạm Đình Nam –Trường Caođẳng nghề Đà Lạt Trang 60 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> </body> <script src="/socket.io/socket.io.js"></script> <script>
var socket = io(); </script>
</html>
Nếu bạn chạy ứng dụng và truy cập localhost:3000 bạn sẽ nhận được thông báo
“Hello Word” trên trình duyệt.
Để kiểm tra nhật ký ở bảng điều khiển console các bạn sẽ nhận được các thông
báo sau.