Giới thiệu về WebSockets

WebSockets là một giải pháp thay thế cho giao tiếp HTTP trong Ứng dụng Web. Họ cung cấp một kênh giao tiếp hai chiều, tồn tại lâu dài giữa máy khách và máy chủ. Tìm hiểu cách sử dụng chúng để thực hiện các tương tác mạng

WebSockets là một giải pháp thay thế cho giao tiếp HTTP trong Ứng dụng Web.

Họ cung cấp một kênh giao tiếp hai chiều, tồn tại lâu dài giữa máy khách và máy chủ.

Sau khi được thiết lập, kênh được giữ ở trạng thái mở, cung cấp kết nối rất nhanh với độ trễ và chi phí thấp.

Hỗ trợ trình duyệt cho WebSockets

WebSockets được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Browser support for WebSockets

WebSockets khác với HTTP như thế nào

HTTP là một giao thức rất khác và cũng là một cách giao tiếp khác.

HTTP là một giao thức yêu cầu / phản hồi: máy chủ trả về một số dữ liệu khi máy khách yêu cầu.

Với WebSockets:

  • cácmáy chủ có thể gửi tin nhắn đến máy kháchmà không có khách hàng yêu cầu một cách rõ ràng một cái gì đó
  • máy khách và máy chủ có thểnói chuyện với nhau đồng thời
  • chi phí rất ít dữ liệucần được trao đổi để gửi tin nhắn. Điều này có nghĩa là mộtgiao tiếp độ trễ thấp.

WebSocketsrất tốt chothời gian thựcsống lâuthông tin liên lạc.

HTTPlà tuyệt vời chotrao đổi dữ liệu không thường xuyênvà các tương tác do khách hàng khởi xướng.

HTTP đơn giản hơn nhiềuđể triển khai, trong khi WebSockets yêu cầu chi phí cao hơn một chút.

WebSockets bảo mật

Luôn sử dụng giao thức bảo mật, được mã hóa cho WebSockets,wss://.

ws://đề cập đến phiên bản WebSockets không an toàn (http://của WebSockets), và nên tránh vì những lý do rõ ràng.

Tạo kết nối WebSockets mới

const url = 'wss://myserver.com/something'
const connection = new WebSocket(url)

connectionlà mộtWebSocketvật.

Khi kết nối được thiết lập thành công,opensự kiện bị sa thải.

Hãy lắng nghe nó bằng cách gán một chức năng gọi lại choonopentài sản củaconnectionvật:

connection.onopen = () => {
  //...
}

Nếu có bất kỳ lỗi nào,onerrorhàm gọi lại được kích hoạt:

connection.onerror = (error) => {
  console.log(`WebSocket error: ${error}`)
}

Gửi dữ liệu đến máy chủ bằng WebSockets

Sau khi kết nối được mở, bạn có thể gửi dữ liệu đến máy chủ.

Bạn có thể làm như vậy một cách thuận tiện bên trongonopenchức năng gọi lại:

connection.onopen = () => {
  connection.send('hey')
}

Nhận dữ liệu từ máy chủ bằng cách sử dụng WebSockets

Nghe khi bật chức năng gọi lạionmessage, được gọi khimessagesự kiện được nhận:

connection.onmessage = (e) => {
  console.log(e.data)
}

Triển khai một máy chủ trong Node.js

wslà một thư viện WebSockets phổ biến choNode.js.

Chúng tôi sẽ sử dụng nó để xây dựng một máy chủ WebSockets. Nó cũng có thể được sử dụng để triển khai một máy khách và sử dụng WebSockets để giao tiếp giữa hai dịch vụ phụ trợ.

Cài đặt nó bằng cách sử dụngnpm:

npm init
npm install ws

Mã bạn cần viết là rất ít:

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 8080 })

wss.on(‘connection’, (ws) => { ws.on(‘message’, (message) => { console.log(Received message =&gt; </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">message</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) }) ws.send(‘ho!’) })

Mã này tạo một máy chủ mới trên cổng 8080 (cổng mặc định cho WebSockets) và thêm chức năng gọi lại khi kết nối được thiết lập, gửiho!cho máy khách và ghi nhật ký các thông báo mà nó nhận được.

Xem ví dụ trực tiếp trên Glitch

Đây là một ví dụ trực tiếp về máy chủ WebSockets:https://glitch.com/edit/#!/flavio-websockets-server-example

Đây là một ứng dụng khách WebSockets tương tác với máy chủ:https://glitch.com/edit/#!/flavio-websockets-client-example

Gỡ lỗi websockets

Chrome và Firefox có một cách hữu ích để trực quan hóa tất cả thông tin được gửi qua WebSockets. Hỗ trợ DevTools của họ luôn được cải thiện. Firefox tại thời điểm viết bài này có công cụ gỡ lỗi hữu ích và nhiều thông tin nhất.

Trong cả hai, bạn nhìn vào bảng điều khiển Mạng và chọn WS để chỉ lọc các kết nối WebSockets.

Tôi đã chụp những ảnh chụp màn hình này của Firefox (Phiên bản dành cho nhà phát triển) đang hoạt động:

Firefox headers

Firefox detail

Firefox DevTools có thể làm được nhiều hơn những gì tôi đã trình bày. Trong ví dụ tôi đã sử dụng để kiểm tra, tôi chỉ gửi một chuỗi, nhưng bạn có thể kiểm tra bất kỳ dữ liệu nào được gửi theo cách có tổ chức hơn:

Data in Firefox

Thủ tục thanh toánbài đăng này trên Mozilla Hacksđể biết thêm về cách sử dụng công cụ này.

Đây là ảnh chụp màn hình của Chrome, hy vọng sẽ sớm cải thiện các công cụ gỡ lỗi WebSockets của nó:

Chrome


Các hướng dẫn khác về mạng: