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 ...
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 | Miêu 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 | Miêu 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 | Miêu 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ừ 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.
Loạt bài hướng dẫn học lập trình HTML5 cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học HTML5 phổ biến khác tại vietjack.com:
