WebSockets - Gửi và nhận tin nhắn
Các Messagesự kiện thường diễn ra khi máy chủ gửi một số dữ liệu. Tin nhắn do máy chủ gửi đến máy khách có thể bao gồm tin nhắn văn bản thuần túy, dữ liệu nhị phân hoặc hình ảnh. Bất cứ khi nào dữ liệu được gửi,onmessage chức năng được kích hoạt.
Sự kiện này hoạt động như một tai của khách hàng đối với máy chủ. Bất cứ khi nào máy chủ gửi dữ liệu,onmessage sự kiện bị sa thải.
Đoạn mã sau mô tả việc mở kết nối của giao thức Web Socket.
connection.onmessage = function(e){
var server_message = e.data;
console.log(server_message);
}Cũng cần phải tính đến những loại dữ liệu nào có thể được truyền với sự trợ giúp của Web Sockets. Giao thức ổ cắm web hỗ trợ văn bản và dữ liệu nhị phân. Về mặt Javascript,text đề cập đến dưới dạng một chuỗi, trong khi dữ liệu nhị phân được biểu thị như ArrayBuffer.
Các ổ cắm web chỉ hỗ trợ một định dạng nhị phân tại một thời điểm. Việc khai báo dữ liệu nhị phân được thực hiện rõ ràng như sau:
socket.binaryType = ”arrayBuffer”;
socket.binaryType = ”blob”;Dây
Các chuỗi được coi là hữu ích, xử lý các định dạng có thể đọc được của con người như XML và JSON. Bất cứ khi nàoonmessage sự kiện được nâng lên, khách hàng cần kiểm tra kiểu dữ liệu và hành động cho phù hợp.
Đoạn mã để xác định loại dữ liệu là Chuỗi được đề cập bên dưới -
socket.onmessage = function(event){
if(typeOf event.data === String ) {
console.log(“Received data string”);
}
}JSON (Ký hiệu đối tượng JavaScript)
Đây là một định dạng nhẹ để truyền dữ liệu mà con người có thể đọc được giữa các máy tính. Cấu trúc của JSON bao gồm các cặp khóa-giá trị.
Thí dụ
{
name: “James Devilson”,
message: “Hello World!”
}Đoạn mã sau đây cho thấy cách xử lý một đối tượng JSON và trích xuất các thuộc tính của nó:
socket.onmessage = function(event) {
if(typeOf event.data === String ){
//create a JSON object
var jsonObject = JSON.parse(event.data);
var username = jsonObject.name;
var message = jsonObject.message;
console.log(“Received data string”);
}
}XML
Phân tích cú pháp trong XML không khó, mặc dù các kỹ thuật khác nhau giữa các trình duyệt. Phương pháp tốt nhất là phân tích cú pháp bằng cách sử dụng thư viện của bên thứ ba như jQuery.
Trong cả XML và JSON, máy chủ phản hồi dưới dạng một chuỗi, chuỗi này đang được phân tích cú pháp ở đầu máy khách.
ArrayBuffer
Nó bao gồm một dữ liệu nhị phân có cấu trúc. Các bit kèm theo được đưa ra theo thứ tự để có thể dễ dàng theo dõi vị trí. ArrayBuffers rất tiện để lưu trữ các tệp hình ảnh.
Nhận dữ liệu bằng ArrayBuffers khá đơn giản. Người điều hànhinstanceOf được sử dụng thay vì toán tử bằng.
Đoạn mã sau đây cho thấy cách xử lý và nhận một đối tượng ArrayBuffer:
socket.onmessage = function(event) {
if(event.data instanceof ArrayBuffer ){
var buffer = event.data;
console.log(“Received arraybuffer”);
}
}Ứng dụng Demo
Mã chương trình sau đây cho biết cách gửi và nhận tin nhắn bằng Web Sockets.
<!DOCTYPE html>
<html>
<meta charset = "utf-8" />
<title>WebSocket Test</title>
<script language = "javascript" type = "text/javascript">
var wsUri = "ws://echo.websocket.org/";
var output;
function init() {
output = document.getElementById("output");
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
writeToScreen("CONNECTED");
doSend("WebSocket rocks");
}
function onMessage(evt) {
writeToScreen('<span style = "color: blue;">RESPONSE: ' +
evt.data+'</span>'); websocket.close();
}
function onError(evt) {
writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
}
function doSend(message) {
writeToScreen("SENT: " + message); websocket.send(message);
}
function writeToScreen(message) {
var pre = document.createElement("p");
pre.style.wordWrap = "break-word";
pre.innerHTML = message; output.appendChild(pre);
}
window.addEventListener("load", init, false);
</script>
<h2>WebSocket Test</h2>
<div id = "output"></div>
</html>Kết quả được hiển thị bên dưới.
