Socket.ioTrong bài hướng dẫn này, chúng tôi sẽ tạo một ứng dụng trò
chuyện cơ bản. Nó không yêu cầu kiến thức cơ bản của Node,JS hoặc Socket.IO, vì
vậy nó rất lý tưởng cho người dung ở mọi cấp độ kiến thức.
Giới thiệu
Viết một ứng dụng trò chuyện với ứng dụng Web phổ biến như
LAMP (PHP) thường dẫn khó. Nó liên quan đến việc bỏ phiếu cho máy chủ để thay đổi,
theo dõi dấu thời gian, và nó chậm hơn rất nhiều.
Sockets theo thông thường là giải pháp xung quanh mà hầu hết
các hệ thống trò chuyện thời gian thực được cấu trúc, cung cấp một giao tiếp
hai chiều giữa máy khách và máy chủ.
Điều này có nghĩa là máy chủ có thể đẩy tin nhắn đến máy
khách. Bất cứ khi nào bạn viết một tin nhắn trò chuyện, ý tưởng là máy chủ sẽ lấy
nó và đẩy nó tới tất cả các máy khách được kết nối.
Web framework
Đầu tiên mục tiêu cài đặt một trang HTML cơ bản phục vụ một
máy chủ và danh sách các tin nhắn. Chúng tôi sẽ sử dụng framework Node.js. Hãy
chắc chắn rằng bạn đã cài Node.js.
Trước tiên hãy tạo một file package.json để kê khai mô tả dự
án. Tôi khuyến khích bạn đặt nó trong một thư mục trống ( Tôi gọi nó là
chat-example ).
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io
app",
"dependencies": {}
}
Bây giờ, cài đặt các dependencies cần thiết chúng tôi sẽ sử
dụng npm install:
npm install express@4.15.2
Sau khi cài đặt, chúng ta có thể tạo tệp index.js để thiết lập
ứng dụng của mình.
var app = require('express')();
var http = require('http').createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hello
world</h1>');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});
Nó có nghĩa là:
-
Express khoiwr tạo ứng dụng để trở thành một
trình xử lý chức năng mà bạn có thể cung cấp cho máy chủ HTTP
-
Chúng ta xác định một trình xử lý tuyến đường/được
gọi khi chúng ta truy cập trang web.
-
Chúng ta làm ccho máy chủ HTTP lắng nghe trên cổng
3000.
Nếu bạn chạy node index.js bạn sẽ thấy như sau
Và nếu bạn truy cập trên trình duyệt: http://localhost:3000
HTML
Trong file index.js chúng ta gọi res.send và truyền thành một
chuỗi của HTML. Mã của chúng tôi sẽ trông rất khó hiểu nếu chúng ta đặt toàn bộ
ứng dụng trong HTML, vì thế thay thế chúng ta tạo file index.html.
Thay vào đó, hãy cấu trúc lại bộ xử lý của chúng ta sử dụng
sendFile.
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
Đặt nó như sau trong file index.html của bạn:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0;
box-sizing: border-box; }
body { font: 13px Helvetica, Arial;
}
form { background: #000; padding:
3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding:
10px; width: 90%; margin-right: 0.5%; }
form button { width: 9%;
background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none;
margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) {
background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
Nếu bạn restart tiến trình ( bằng cách Control+C và chạy
node index.js ) và refresh lại page sẽ như sau:
Tích hợp Socket.IO
Socket.IO bao gồm 2 phần:
-
Một máy chủ tích hợp với (hoặc gắn kết trên)
Node.js HTTP Server socket.io
-
Một thư viện máy khách tải về phí trình duyệt
socket.io-client
Trong suôt quá trình phát triển, socket.io phục vụ khách hang
tự động cho chúng tôi, vì vậy chúng ta chỉ phải cài đặt một module:
npm install socket.io
Nó sẽ cài đặt module và them các dependency vào package.json
Bây giờ sửa file index.js them no:
var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});
Lưu ý rằng tôi khởi tạo một phiên bản mới của socket.io bằng
cách chuyển đối tượng http(máy chủ HTTP). Sau đó tôi lắng nghe sự kiện kết nối
cho các socket và đăng nhập vào màn điều khiển.
Bây giờ trong file index.html thêm đoạn trích trước thẻ
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
Đó là tất cả nhứng gì nó cần để tải socket.io-client
Nếu bạn muốn sử dụng phiên bản nội bộ của client-side js, bạn
có thể tìm nó tại node_modules/socket.io-client/dist/socket.io.js.
Để ý tôi không chỉ định bất kỳ URL khi tôi gọi io(), vì nó mặc định
cố gắng kết nối với máy chủ phục vụ trang.
Nếu ngay bây giờ bạn restart tiến trình và refresh trang web bạn
có thể thấy màn hình hiển thị “a user connected”.
Cố gắng mở một vài tab và bạn sẽ thấy một số tin nhắn.
Mỗi socket cũng kích hoạt một sự kiện ngắt kết nối:
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
Sau đó nếu bạn refresh một tab nhiều lần, bạn có thể thấy nó hoạt
động:
Phát ra sự
kiện
Ý tưởng chính phía sau socket.io là bạn có thể gửi và nhận được bất
kỳ sự kiện bạn muốn, cùng với bất kỳ dữ liệu bạn muốn. Bất kỳ đối tượng nào có
thể được mã hóa dưới dạng JSON sẽ làm, và dữ liệu nhị phân cũng được hỗ trợ.
Hãy tạo ra nó để khi người dung gõ một tin nhắn, máy chủ lấy nó dưới
dạng tin nhắn trò chuyện. Phần section trong index.html bây giờ sẽ giống như:
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
</script>
Và trong index.js chúng ta in ra sự kiện tin nhắn trò chuyện:
io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
});
});
Broadcasting
Mục tiêu tiếp theo là để chúng ta phát ra sự kiện từ máy chủ đến
những người dung còn lại.
Để gửi một sự kiện tới mọi người, socket.io cung cấp cho chúng ta
phương thức io.emit().
io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' });
Nếu bạn muốn gửi một tin nhắn tới tất cả ngoại từ một socket,
chúng ta có cờ để broadcast ra từ socket:
io.on('connection', (socket) => {
socket.broadcast.emit('hi');
});
Trong trường hợp, vì mục đích đơn giản, chúng tôi sẽ gửi tin nhắn cho
mọi người, kết cả người gửi.
io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
Và trên phía khách hang khi chúng tôi ghi lại một sự kiện tin nhắn
trò chuyện, chúng tôi sẽ đưa nó vào trang. Tổng mã JavaScript phía máy khách
như sau:
<script>
$(function () {
var socket =
io();
$('form').submit(function(e){
e.preventDefault(); // prevents
page reloading
socket.emit('chat
message Socket.io
Trong bài hướng dẫn này, chúng tôi sẽ tạo một ứng dụng trò
chuyện cơ bản. Nó không yêu cầu kiến thức cơ bản của Node,JS hoặc Socket.IO, vì
vậy nó rất lý tưởng cho người dung ở mọi cấp độ kiến thức.
Giới thiệu
Viết một ứng dụng trò chuyện với ứng dụng Web phổ biến như
LAMP (PHP) thường dẫn khó. Nó liên quan đến việc bỏ phiếu cho máy chủ để thay đổi,
theo dõi dấu thời gian, và nó chậm hơn rất nhiều.
Sockets theo thông thường là giải pháp xung quanh mà hầu hết
các hệ thống trò chuyện thời gian thực được cấu trúc, cung cấp một giao tiếp
hai chiều giữa máy khách và máy chủ.
Điều này có nghĩa là máy chủ có thể đẩy tin nhắn đến máy
khách. Bất cứ khi nào bạn viết một tin nhắn trò chuyện, ý tưởng là máy chủ sẽ lấy
nó và đẩy nó tới tất cả các máy khách được kết nối.
Web framework
Đầu tiên mục tiêu cài đặt một trang HTML cơ bản phục vụ một
máy chủ và danh sách các tin nhắn. Chúng tôi sẽ sử dụng framework Node.js. Hãy
chắc chắn rằng bạn đã cài Node.js.
Trước tiên hãy tạo một file package.json để kê khai mô tả dự
án. Tôi khuyến khích bạn đặt nó trong một thư mục trống ( Tôi gọi nó là
chat-example ).
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io
app",
"dependencies": {}
}
Bây giờ, cài đặt các dependencies cần thiết chúng tôi sẽ sử
dụng npm install:
npm install express@4.15.2
Sau khi cài đặt, chúng ta có thể tạo tệp index.js để thiết lập
ứng dụng của mình.
var app = require('express')();
var http = require('http').createServer(app);
app.get('/', (req, res) => {
res.send('<h1>Hello
world</h1>');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});
Nó có nghĩa là:
-
Express khoiwr tạo ứng dụng để trở thành một
trình xử lý chức năng mà bạn có thể cung cấp cho máy chủ HTTP
-
Chúng ta xác định một trình xử lý tuyến đường/được
gọi khi chúng ta truy cập trang web.
-
Chúng ta làm ccho máy chủ HTTP lắng nghe trên cổng
3000.
Nếu bạn chạy node index.js bạn sẽ thấy như sau
Và nếu bạn truy cập trên trình duyệt: http://localhost:3000
HTML
Trong file index.js chúng ta gọi res.send và truyền thành một
chuỗi của HTML. Mã của chúng tôi sẽ trông rất khó hiểu nếu chúng ta đặt toàn bộ
ứng dụng trong HTML, vì thế thay thế chúng ta tạo file index.html.
Thay vào đó, hãy cấu trúc lại bộ xử lý của chúng ta sử dụng
sendFile.
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
Đặt nó như sau trong file index.html của bạn:
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0;
box-sizing: border-box; }
body { font: 13px Helvetica, Arial;
}
form { background: #000; padding:
3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding:
10px; width: 90%; margin-right: 0.5%; }
form button { width: 9%;
background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none;
margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) {
background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
Nếu bạn restart tiến trình ( bằng cách Control+C và chạy
node index.js ) và refresh lại page sẽ như sau:
Tích hợp Socket.IO
Socket.IO bao gồm 2 phần:
-
Một máy chủ tích hợp với (hoặc gắn kết trên)
Node.js HTTP Server socket.io
-
Một thư viện máy khách tải về phí trình duyệt
socket.io-client
Trong suôt quá trình phát triển, socket.io phục vụ khách hang
tự động cho chúng tôi, vì vậy chúng ta chỉ phải cài đặt một module:
npm install socket.io
Nó sẽ cài đặt module và them các dependency vào package.json
Bây giờ sửa file index.js them no:
var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
console.log('a user connected');
});
http.listen(3000, () => {
console.log('listening on *:3000');
});
Lưu ý rằng tôi khởi tạo một phiên bản mới của socket.io bằng
cách chuyển đối tượng http(máy chủ HTTP). Sau đó tôi lắng nghe sự kiện kết nối
cho các socket và đăng nhập vào màn điều khiển.
Bây giờ trong file index.html thêm đoạn trích trước thẻ
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
Đó là tất cả nhứng gì nó cần để tải socket.io-client
Nếu bạn muốn sử dụng phiên bản nội bộ của client-side js, bạn
có thể tìm nó tại node_modules/socket.io-client/dist/socket.io.js.
Để ý tôi không chỉ định bất kỳ URL khi tôi gọi io(), vì nó mặc định
cố gắng kết nối với máy chủ phục vụ trang.
Nếu ngay bây giờ bạn restart tiến trình và refresh trang web bạn
có thể thấy màn hình hiển thị “a user connected”.
Cố gắng mở một vài tab và bạn sẽ thấy một số tin nhắn.
Mỗi socket cũng kích hoạt một sự kiện ngắt kết nối:
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
});
Sau đó nếu bạn refresh một tab nhiều lần, bạn có thể thấy nó hoạt
động:
Phát ra sự
kiện
Ý tưởng chính phía sau socket.io là bạn có thể gửi và nhận được bất
kỳ sự kiện bạn muốn, cùng với bất kỳ dữ liệu bạn muốn. Bất kỳ đối tượng nào có
thể được mã hóa dưới dạng JSON sẽ làm, và dữ liệu nhị phân cũng được hỗ trợ.
Hãy tạo ra nó để khi người dung gõ một tin nhắn, máy chủ lấy nó dưới
dạng tin nhắn trò chuyện. Phần section trong index.html bây giờ sẽ giống như:
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(function () {
var socket = io();
$('form').submit(function(e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
</script>
Và trong index.js chúng ta in ra sự kiện tin nhắn trò chuyện:
io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
});
});
Broadcasting
Mục tiêu tiếp theo là để chúng ta phát ra sự kiện từ máy chủ đến
những người dung còn lại.
Để gửi một sự kiện tới mọi người, socket.io cung cấp cho chúng ta
phương thức io.emit().
io.emit('some event', { someProperty: 'some value', otherProperty: 'other value' });
Nếu bạn muốn gửi một tin nhắn tới tất cả ngoại từ một socket,
chúng ta có cờ để broadcast ra từ socket:
io.on('connection', (socket) => {
socket.broadcast.emit('hi');
});
Trong trường hợp, vì mục đích đơn giản, chúng tôi sẽ gửi tin nhắn cho
mọi người, kết cả người gửi.
io.on('connection', (socket) => {
socket.on('chat message', (msg) => {
io.emit('chat message', msg);
});
});
Và trên phía khách hang khi chúng tôi ghi lại một sự kiện tin nhắn
trò chuyện, chúng tôi sẽ đưa nó vào trang. Tổng mã JavaScript phía máy khách
như sau:
<script>
$(function () {
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
Và nó hoàn thành ứng dụng trò chuyện của chúng ta, trong 20 dòng
code!
Homework
Một số ý tưởng cải tiến ứng dụng:
-
Broadcast một tin nhắn cho người dung được kết
nối khi ai đó kết nối hoặc ngắt kết nối
-
Thêm hỗ trợ biệt danh
-
Đừng gửi cùng một tin nhắn cho người dung đã gửi
nó. Thay vào đó, hãy nối tin nhắn trực tiếp ngay khi anh ta nhấn enter.
-
Thêm “{user} is typing” chắc năng.
-
Hiển thị ai online
-
Thêm tin nhắn riêng tư
-
Chia sẻ cải tiến của bạn.
', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
Và nó hoàn thành ứng dụng trò chuyện của chúng ta, trong 20 dòng
code!
Homework
Một số ý tưởng cải tiến ứng dụng:
-
Broadcast một tin nhắn cho người dung được kết
nối khi ai đó kết nối hoặc ngắt kết nối
-
Thêm hỗ trợ biệt danh
-
Đừng gửi cùng một tin nhắn cho người dung đã gửi
nó. Thay vào đó, hãy nối tin nhắn trực tiếp ngay khi anh ta nhấn enter.
-
Thêm “{user} is typing” chắc năng.
-
Hiển thị ai online
-
Thêm tin nhắn riêng tư
-
Chia sẻ cải tiến của bạn.
,%20showcasing%20a%20modern%20cloud%20computing%20ecosystem.%20The%20image%20should%20feature%20a%20cloud%20at%20the%20center%20wi.webp)
.webp)
,%20showcasing%20a%20modern%20cloud%20computing%20ecosystem.%20The%20image%20should%20feature%20a%20cloud%20at%20the%20center%20wi.webp)
