WebSockets trong HTML5
Sự kiện Server-Sent trong HTML5 Nội dung chính WebSockets trong HTML5 Các thuộc tính WebSocket Các sự kiện WebSocket Các phương thức WebSocket Ví dụ WebSocket Client-Side HTML và JavaScript Code Cài đặt pywebsocket Bắt đầu Server ...
Nội dung chính
- WebSockets trong HTML5
- Các thuộc tính WebSocket
- Các sự kiện WebSocket
- Các phương thức WebSocket
- Ví dụ WebSocket
- Client-Side HTML và JavaScript Code
- Cài đặt pywebsocket
- Bắt đầu Server
WebSockets trong HTML5
WebSockets là công nghệ giao tiếp hai chiều phiên bản tiếp theo cho các ứng dụng web mà điều hành qua một Socket đơn và được tiếp xúc thông qua một giao diện JavaScript trong các trình duyệt tuân thủ HTML5.
Một khi bạn nhận một kết nối WebSocket với Web Server, bạn có thể gửi dữ liệu từ trình duyệt tới Server bởi gọi một phương thức send(), và nhận dữ liệu từ Server tới trình duyệt bằng một onmessage Event Handler.
Sau đây là API mà tạo một đối tượng WebSocket mới:
var Socket = new WebSocket(url, [protocal] );
Ở đây, tham số đầu tiên url xác định URL để kết nối. Thuộc tính thứ hai protocol là tùy ý, và nếu nó có mặt, nó xác định một giao thức phụ mà Server phải hỗ trợ cho kết nối để thành công.
Các thuộc tính WebSocket
Sau đây là thuộc tính của đối tượng WebSocket. Giả sử chúng ta tạo đối tượng Socket như đã đề cập ở trên:
| Thuộc tính | Mô tả |
|---|---|
| Socket.readyState | Thuộc tính chỉ đọc readyState biểu diễn trạng thái kết nối. Nó có các giá trị sau:
|
| Socket.bufferedAmount | Thuộc tính chỉ đọc bufferedAmount biểu diễn số byte của UTF-8 mà đã được xếp hàng bởi sử dụng phương thức send() |
Các sự kiện WebSocket
Sau đây là các sự kiện được liên kết với đối tượng WebSocket. Giả sử chúng ta tạo đối tượng Socket như đã đề cập ở trên:
| Sự kiện | Event Handler | Mô tả |
|---|---|---|
| open | Socket.onopen | Sự kiện này xảy ra khi kết nối Socket được thành lập. |
| message | Socket.onmessage | Sự kiện này xảy ra khi Client nhận dữ liệu từ Server. |
| error | Socket.onerror | Sự kiện này xảy ra khi có bất kỳ lỗi nào trong giao tiếp. |
| close | Socket.onclose | Sự kiện này xảy ra khi kết nối được đóng. |
Các phương thức WebSocket
Sau đây là các phương thức liên kết với đối tượng WebSocket. Giả sử chúng ta tạo đối tượng Socket như đã đề cập ở trên:
| Phương thức | Mô tả |
|---|---|
| Socket.send() | Phương thức send(data) truyền tải dữ liệu sử dụng kết nối đó. |
| Socket.close() | Phương thức close() sẽ được sử dụng để kết thúc bất kỳ kết nối đang tồn tại. |
Ví dụ WebSocket
Một WebSocket là một TCP socket hai chiều chuẩn giữa Client và Server. Socket bắt đầu như là một kết nối HTTP và sau đó "Nâng cấp" thành một TCP socket sau khi một HTTP handshake. Sau handshake, hoặc side có thể gửi dữ liệu.
Client-Side HTML và JavaScript Code
Tại thời điểm viết bài hướng dẫn này, chỉ có một số trình duyệt hỗ trợ giao thức WebSocket. Bạn có thể thử ví dụ sau với phiên bản mới nhất của Chrome, Mozilla, Opera và Safari.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("WebSocket is supported by your Browser!");
// Let us open a web socket
var ws = new WebSocket("ws://localhost:9998/echo");
ws.onopen = function()
{
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function()
{
// websocket is closed.
alert("Connection is closed...");
};
}
else
{
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>
Cài đặt pywebsocket
Trước khi bạn kiểm tra chương trình Client ở trên, bạn cần một Server mà hỗ trợ WebSocket. Bạn tải mod_pywebsocket-x.x.x.tar.gz từ pywebsocket mà giúp đỡ cung cấp một WebSocket mở rộng cho Apache HTTP Server và cài đặt nó theo các bước sau:
Unzip và untar tệp đã tải về.
Vào trong thư mục pywebsocket-x.x.x/src/.
Chạy $python setup.py
Cài đặt $sudo python setup.py
Sau đó đọc tài liệu bởi:
- $pydoc mod_pywebsocket
Nó sẽ cài đặt trong môi trường python của bạn.
Bắt đầu Server
Vào thư mục pywebsocket-x.x.x/src/mod_pywebsocket và chạy lệnh sau:
$sudo python standalone.py -p 9998 -w ../example/
Nó sẽ bắt đầu Server tại Port 9998 và sử dụng thư mục handler được xác định bởi tùy chọn –w nơi echo_wsh.py cư ngụ.
Bây giờ sử dụng trình duyệt Chrome mở tập tin html bạn đã tạo ở phần bắt đầu. Nếu trình duyệt hỗ trợ WebSocket(), thì sau đó bạn sẽ nhận cảnh báo chỉ rằng trình duyệt của bạn hỗ trợ WebSocket và cuối cùng khi bạn nhấn chuột trên "Run WebSocket", bạn sẽ nhận thông báo Goodbye được gửi từ Server script.
