HTML - WebSockets: Hướng dẫn dành cho người mới bắt đầu
Xin chào các bạnfuture web developers! Hôm nay, chúng ta sẽ cùng khám phá thế giới thú vị của WebSockets. Đừng lo lắng nếu bạn chưa từng nghe về chúng trước đây - đến cuối bài hướng dẫn này, bạn sẽ trở thành một法师 WebSocket! Vậy, hãy lấy饮料 yêu thích của bạn, thoải mái ngồi xuống, và cùng bắt đầu hành trình của chúng ta.
WebSockets là gì?
Trước khi chúng ta nhảy vào chi tiết, hãy hiểu qua về WebSockets là gì và tại sao chúng lại tuyệt vời như vậy. Hãy tưởng tượng bạn đang trò chuyện với một người bạn. Trong một cuộc gọi điện thông thường, bạn phải quay số, chờ họ nhấc máy, nói những gì bạn muốn, và sau đó cúp máy. Nếu bạn muốn nói chuyện lại, bạn phải lặp lại toàn bộ quá trình đó. Có vẻ nhàm chán, phải không?
Đó là cách giao tiếp web truyền thống hoạt động. Trình duyệt của bạn gửi yêu cầu, chờ phản hồi, và sau đó đóng kết nối. WebSockets, mặt khác, giống như có một线路 điện thoại mở liên tục, nơi bạn và người bạn của bạn có thể nói chuyện bất cứ khi nào bạn muốn, mà không cần liên tục quay số và cúp máy. Đ棒的 phải không?
Cú pháp
Bây giờ, hãy xem cách chúng ta thực sự sử dụng WebSockets trong HTML. Cú pháp khá đơn giản:
<script>
var socket = new WebSocket('ws://example.com/socket');
</script>Ở đây, chúng ta đang tạo một đối tượng WebSocket mới và kết nối nó với máy chủ tại 'ws://example.com/socket'. Phần 'ws://' tương tự như 'http://' nhưng đặc biệt cho WebSockets. Cũng có một phiên bản an toàn, 'wss://', tương tự như 'https://'.
Các thuộc tính của WebSocket
WebSockets có một số thuộc tính hữu ích cho biết về trạng thái hiện tại của kết nối của chúng ta. Hãy xem chúng trong bảng:
| Thuộc tính | Mô tả |
|---|---|
| readyState | Trạng thái hiện tại của kết nối |
| bufferedAmount | Số byte dữ liệu排队 sử dụng phương thức send() |
| extensions | Các extension được máy chủ chọn |
| protocol | Tên của sub-protocol được máy chủ chọn |
Thuộc tính readyState đặc biệt hữu ích. Nó có thể có bốn giá trị:
- 0 (CONNECTING): Kết nối chưa mở.
- 1 (OPEN): Kết nối mở và sẵn sàng giao tiếp.
- 2 (CLOSING): Kết nối đang trong quá trình đóng.
- 3 (CLOSED): Kết nối đã đóng hoặc không thể mở.
Sự kiện WebSocket
WebSockets không chỉ về gửi dữ liệu - chúng còn có thể phản hồi với các sự kiện khác nhau. Điều này giống như đặt lên party streamers sẽ nổ khi có điều gì đó cụ thể xảy ra! Dưới đây là các sự kiện chính:
- onopen: Bắn ra khi kết nối được thiết lập.
- onmessage: Bắn ra khi dữ liệu được nhận từ máy chủ.
- onerror: Bắn ra khi xảy ra lỗi.
- onclose: Bắn ra khi kết nối được đóng.
Hãy xem cách chúng ta sử dụng chúng trong mã:
<script>
var socket = new WebSocket('ws://example.com/socket');
socket.onopen = function(event) {
console.log('Kết nối được thiết lập!');
};
socket.onmessage = function(event) {
console.log('Tin nhắn từ máy chủ:', event.data);
};
socket.onerror = function(error) {
console.log('Lỗi WebSocket:', error);
};
socket.onclose = function(event) {
console.log('Kết nối đóng.');
};
</script>Trong ví dụ này, chúng ta đang thiết lập các hàm để xử lý từng sự kiện. Khi kết nối mở, chúng ta ghi một thông báo. Khi chúng ta nhận được tin nhắn, chúng ta ghi nó. Nếu có lỗi, chúng ta ghi lỗi đó. Và khi kết nối đóng, chúng ta chào tạm biệt!
Phương thức WebSocket
Bây giờ chúng ta đã biết cách lắng nghe sự kiện, hãy xem cách chúng ta có thể thực sự làm việc với WebSocket của mình. Dưới đây là các phương thức chính:
| Phương thức | Mô tả |
|---|---|
| send() | Gửi dữ liệu đến máy chủ |
| close() | Đóng kết nối WebSocket |
Dưới đây là cách chúng ta sử dụng các phương thức này:
<script>
var socket = new WebSocket('ws://example.com/socket');
// Gửi một tin nhắn đến máy chủ
socket.send('Xin chào, Máy chủ!');
// Đóng kết nối
socket.close();
</script>Đó là đơn giản! Với send(), chúng ta có thể gửi bất kỳ dữ liệu nào chúng ta muốn đến máy chủ. Và khi chúng ta đã xong, chúng ta có thể lịch sự đóng kết nối với close().
Thiết lập máy chủ WebSocket với Python
Tôi biết chúng ta đang tập trung vào HTML ở đây, nhưng tôi nghĩ điều quan trọng là phải hiểu cả hai bên của cuộc trò chuyện. Vậy, hãy nhanh chóng xem cách chúng ta có thể thiết lập một máy chủ WebSocket đơn giản bằng Python. Đừng lo lắng nếu bạn không quen thuộc với Python - khái niệm ở đây là điều quan trọng.
import asyncio
import websockets
async def echo(websocket, path):
async for message in websocket:
await websocket.send(f"Echo: {message}")
start_server = websockets.serve(echo, "localhost", 8765)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()Máy chủ này đơn giản là echo lại bất kỳ tin nhắn nào nó nhận được, thêm elő "Echo: " vào trước. Nó đang chạy trên localhost (máy tính của bạn) trên cổng 8765.
Thiết lập client HTML cho máy chủ
Bây giờ chúng ta đã có máy chủ, hãy tạo một trang HTML kết nối với nó:
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Test</title>
</head>
<body>
<h1>WebSocket Test</h1>
<input type="text" id="messageInput" placeholder="Nhập tin nhắn">
<button onclick="sendMessage()">Gửi</button>
<div id="messages"></div>
<script>
var socket = new WebSocket('ws://localhost:8765');
socket.onopen = function(event) {
console.log('Kết nối được thiết lập!');
};
socket.onmessage = function(event) {
var messages = document.getElementById('messages');
messages.innerHTML += '<p>' + event.data + '</p>';
};
function sendMessage() {
var input = document.getElementById('messageInput');
socket.send(input.value);
input.value = '';
}
</script>
</body>
</html>Trang HTML này tạo một giao diện đơn giản nơi bạn có thể nhập một tin nhắn, gửi nó đến máy chủ, và xem phản hồi được echo lại.
Và thế là xong! Chúng ta đã bao gồm các основы WebSockets, từ việc hiểu chúng là gì, đến việc thiết lập máy chủ và tạo client. Nhớ rằng WebSockets là về giao tiếp hai chiều, theo thời gian thực. Chúng hoàn hảo cho các ứng dụng như phòng chat, cập nhật thể thao trực tiếp, hoặc bất kỳ tình huống nào bạn cần trao đổi dữ liệu ngay lập tức.
Khi bạn tiếp tục hành trình trong phát triển web, bạn sẽ thấy rằng WebSockets mở ra một thế giới mới của cơ hội. Vậy, hãy tiếp tục luyện tập, thử nghiệm, và quan trọng nhất, hãy vui vẻ! Chúc mừng bạn!
Credits: Image by storyset