Giới thiệu về WebSockets trong JavaScript

WebSocket là một công nghệ không thể thiếu trong nhiều ứng dụng web hiện đại. Nếu bạn viết mã cho web, chắc hẳn bạn đã nghe đến thuật ngữ này trước đây, nhưng có thể bạn không chắc nó chính xác là gì hoặc cách sử dụng nó. May mắn thay, WebSocket không phải là một khái niệm phức tạp và bạn có thể hiểu cơ bản về nó một cách khá nhanh chóng.

WebSocket là gì?

Thật không may, WebSocket là một trong những cái tên thoạt nhìn có vẻ không hợp lý. WebSocket thực chất là tên của một giao thức truyền thông cho phép giao tiếp hai chiều giữa máy khách và máy chủ web.

Nói một cách đơn giản hơn, WebSocket là một công nghệ cho phép máy khách và máy chủ tạo kết nối mà một trong hai bên có thể gửi tin nhắn cho bên kia bất kỳ lúc nào.

Điều này khác với kết nối HTTP thông thường, nơi máy khách phải bắt đầu một yêu cầu và chỉ sau đó máy chủ mới có thể gửi phản hồi. Trên thực tế, WebSocket là một giao thức truyền thông hoàn toàn khác với HTTP được thiết kế để tương thích với HTTP. Khi một ứng dụng khách muốn khởi tạo kết nối WebSocket, nó cần sử dụng cơ chế nâng cấp HTTP để chuyển sang giao thức WebSocket.

Tại thời điểm này, bạn có thể đang nghĩ: “một giao thức chỉ là một tập hợp các quy tắc, làm thế nào bạn có thể sử dụng nó để viết mã?”.

Phần còn thiếu được gọi là ngăn xếp giao thức. Về cơ bản, các thiết bị hỗ trợ giao thức có phần cứng và phần mềm được tích hợp sẵn cho phép bạn viết các ứng dụng giao tiếp bằng giao thức. Giao thức không được sử dụng trực tiếp để xây dựng bất cứ thứ gì.

Tại sao WebSocket được tạo ra?

Để minh họa sự cần thiết của WebSocket, hãy xem xét cơ chế đằng sau trò chuyện trên internet.

Ai đó gửi tin nhắn đến máy chủ trò chuyện từ thiết bị của họ, nhưng máy chủ vẫn phải gửi tin nhắn đó đến thiết bị của bạn trước khi bạn có thể đọc. Nếu máy chủ sử dụng HTTP, máy chủ không thể chuyển tiếp trực tiếp thông báo đó đến bạn vì máy chủ không thể khởi tạo yêu cầu.

Có một số cách để khắc phục sự cố này với HTTP. Một cách là máy khách liên tục gửi các yêu cầu cập nhật đến máy chủ và máy chủ sẽ chuyển tiếp bất kỳ dữ liệu nào mà nó có trong phản hồi. Kỹ thuật này được gọi là thăm dò ý kiến ​​và mỗi yêu cầu được gọi là một cuộc thăm dò ý kiến. Có hai biến thể của bỏ phiếu: bỏ phiếu dài và bỏ phiếu ngắn.

Sử dụng biến thể thăm dò dài có nghĩa là thiết bị khách liên tục hỏi máy chủ xem có thư mới nào không. Nếu có thư mới, máy chủ sẽ gửi thư dưới dạng phản hồi. Nếu không, máy chủ sẽ trì hoãn phản hồi và giữ kết nối mở cho đến khi nó có dữ liệu để gửi lại và sau đó máy khách sẽ ngay lập tức đưa ra yêu cầu mới.

Kỹ thuật này không hiệu quả, vì HTTP không được thiết kế để sử dụng theo cách này. Nó hoạt động đầy đủ ở quy mô nhỏ, nhưng mỗi yêu cầu HTTP liên quan đến việc gửi thêm dữ liệu trong tiêu đề và nó dẫn đến tải trọng trên máy chủ tăng lên đáng kể khi nhiều khách hàng đang thăm dò ý kiến ​​của nó.

Đây là sơ đồ minh họa cuộc bỏ phiếu dài:

Biến thể thăm dò ý kiến ​​ngắn thậm chí còn kém hiệu quả hơn. Trong cuộc thăm dò ngắn, máy chủ không giữ kết nối mở cho đến khi có dữ liệu mới, có nghĩa là máy khách phải tiếp tục thăm dò máy chủ ở những khoảng thời gian cố định, rất ngắn.

Một kỹ thuật khác để giao tiếp hai chiều trong HTTP được gọi là phát trực tuyến.

Trong phát trực tuyến, sau khi yêu cầu đầu tiên được gửi, máy chủ giữ kết nối mở vô thời hạn, gửi các phần thông tin mới dưới dạng phản hồi từng phần liên tục cho máy khách.

Việc sử dụng tính năng phát trực tuyến dẫn đến tổng chi phí dữ liệu và tải máy chủ nhỏ hơn so với bỏ phiếu, vì lý tưởng là máy khách chỉ thực hiện một yêu cầu HTTP. Thật không may, phát trực tuyến tạo ra các vấn đề trong một số điều kiện nhất định vì các trình duyệt và trung gian mạng (như proxy) thường cố gắng xử lý các phản hồi từng phần dưới dạng các phần bị hỏng của một phản hồi HTTP lớn (đó là hành vi HTTP bình thường), thay vì dưới dạng các thông báo riêng biệt mà chúng dự định thì là ở.

WebSocket được tạo ra để giải quyết những vấn đề này. Không giống như HTTP, WebSocket được thiết kế đặc biệt cho giao tiếp hai chiều. Với WebSocket, một khi kết nối được mở, máy khách và máy chủ có thể gửi thư qua lại mà không gặp vấn đề về bỏ phiếu hoặc phát trực tuyến.

Các trường hợp sử dụng cho WebSocket

WebSocket rất tuyệt, nhưng điều đó không có nghĩa là nó nên được sử dụng ở mọi nơi.

Việc triển khai WebSocket có thể làm ứng dụng của bạn thêm phức tạp, đặc biệt là ở phía máy chủ, vì vậy bạn không nên thực hiện nó trừ khi bạn có lý do chính đáng. Điều đó đặt ra câu hỏi: một lý do chính đáng trông như thế nào?

WebSocket lý tưởng cho các trường hợp sử dụng yêu cầu giao tiếp hai chiều thường xuyên với độ trễ thấp. Nói cách khác, WebSocket cung cấp một lợi thế cho các ứng dụng cần giao tiếp thường xuyên hoặc trên quy mô lớn. Nếu giao tiếp không cần theo thời gian thực hoặc ứng dụng sẽ không bao giờ phát triển trên quy mô lớn, thì tính năng thăm dò ý kiến ​​hoặc phát trực tuyến có thể đủ để sử dụng trong ứng dụng đó.

Các ứng dụng điển hình của WebSocket là trong việc xây dựng các ứng dụng trò chuyện, trò chơi nhiều người chơi trực tuyến, phần mềm thông báo và cộng tác theo thời gian thực, v.v.

Cách sử dụng WebSocket ở phía máy khách

Việc sử dụng WebSocket ở phía máy chủ có thể khá liên quan và quá trình này thay đổi đáng kể tùy thuộc vào ngôn ngữ (như C #, Java, v.v.) và thư viện lựa chọn, vì vậy chúng tôi sẽ không trình bày ở đây. Tiếp theo, chúng ta sẽ thảo luận ngắn gọn về cách sử dụng WebSocket ở phía máy khách.

Tất cả các trình duyệt hiện đại đều triển khai một API web được gọi là API WebSocket, là ngăn xếp giao thức của trình duyệt cho giao thức WebSocket. Bạn có thể sử dụng WebSocket trong JavaScript bằng cách sử dụng API này. API cho phép bạn tạo một đối tượng WebSocket, qua đó bạn tạo kết nối WebSocket và tương tác với máy chủ WebSocket.

Bạn có thể sử dụng định dạng mã sau để tạo đối tượng WebSocket:

let exampleSocket = new WebSocket("wss://www.example.com/socketserver", "dummyProtocol");

Đối số đầu tiên của hàm tạo là URI của máy chủ WebSocket mà bạn muốn tạo kết nối. Nó sẽ luôn bắt đầu bằng “ws” hoặc “wss”. Đối số thứ hai là tùy chọn. Giá trị của nó là một chuỗi hoặc một mảng các chuỗi, chỉ định các giao thức con mà bạn hỗ trợ.

Đối tượng WebSocket có thuộc tính chỉ đọc được gọi là readyState. Việc truy cập thuộc tính này cung cấp trạng thái hiện tại của kết nối WebSocket. readyState có bốn giá trị có thể có: “kết nối”, “mở”, “đóng” và “đóng”.

Khi dòng mã đó chạy, trình duyệt sẽ thử và kết nối với máy chủ được chỉ định. Kết nối sẽ không được hoàn tất ngay lập tức, vì vậy readyState của exampleSocket sẽ là “kết nối”. Không có tin nhắn nào có thể được gửi hoặc nhận cho đến khi kết nối hoàn tất, lúc này giá trị của readyState sẽ trở thành “mở”.

Các exampleSocket đối tượng có trình xử lý sự kiện (khác với trình nghe sự kiện DOM) được gọi là “onopen” cho phép bạn thực hiện các hành động khác chỉ sau khi kết nối đã được thiết lập. Đối tượng cũng có một phương thức “gửi” cho phép bạn gửi chuỗi, Blobs (dữ liệu nhị phân) và ArrayBuffers dưới dạng tin nhắn đến máy chủ.

Dưới đây là một ví dụ sử dụng chúng cùng nhau:

exampleSocket.onopen = function (event) {
exampleSocket.send("WebSocket is really cool");
};

API cũng cung cấp một cách để bạn có thể phản ứng với các thông báo mà máy chủ gửi. Điều này được thực hiện với trình nghe sự kiện “onmessage”. Đây là một ví dụ:

exampleSocket.onmessage = function (event) {
console.log(event.data);
}

Thay vào đó, bạn cũng có thể viết một hàm mũi tên:

exampleSocket.onmessage = (event) => { console.log(event.data); }

API cũng cung cấp một gần() phương pháp đóng kết nối. Đây là những gì nó trông giống như:

exampleSocket.close();

WebSocket cho phép giao tiếp hai chiều hiệu quả

WebSocket là một giao thức truyền thông hai chiều. Máy chủ và trình duyệt triển khai ngăn xếp giao thức để giao tiếp bằng cách sử dụng WebSocket. WebSocket tồn tại vì HTTP không được thiết kế để hai chiều. Có các phương pháp để triển khai kết nối hai chiều với HTTP, nhưng chúng có vấn đề.

WebSocket là một công nghệ mạnh mẽ, nhưng không cần thiết trong mọi trường hợp, vì nó có thể làm phức tạp đáng kể kiến ​​trúc ứng dụng. Sử dụng WebSocket ở phía máy khách được thực hiện với API WebSocket của trình duyệt.