面试之《websocket》

配置环境

shell 复制代码

mkdir express
cd express
npm init
npm install express ws

javascript 复制代码

// index.js
var app = require("express")();
var WebSocket = require("ws");

var wss = new WebSocket.Server({ port: 8888  });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

app.listen(4000, function() {
  console.log("Server is running on port 4000")
})

html 复制代码

// index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Hello</h1>
  <p>WebSocket</p>
  <button id="btn" onclick="ws.send('from client: click')">click</button>

  <script>
    var ws = new WebSocket('ws://localhost:8888');
    ws.onopen = function () {
      console.log('ws onopen');
      ws.send('from client: hello');
    };
    ws.onmessage = function (e) {
      console.log('ws onmessage');
      console.log('from server: ' + e.data);
    };
  </script>
</body>

</html>

页面初始化事，就发送hello至ws，ws接收到后，返回"你好！"

简单实现了ws的交互。

下面介绍一下ws的相关知识点：

1. 基础概念

定义：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它允许客户端和服务器之间进行实时、双向的数据传输。
诞生背景：传统的 HTTP 协议是无状态、单向的，每次通信都需要建立新的连接，无法满足实时通信的需求，WebSocket 应运而生。

2. 工作原理

握手阶段 ：客户端发起一个 HTTP 请求，请求头中包含特殊的升级字段（Upgrade: websocket 和 Connection: Upgrade），服务器收到请求后，如果支持 WebSocket 协议，就会返回一个状态码为 101 的响应，表示同意升级协议，之后双方就可以在这个 TCP 连接上进行 WebSocket 通信。
数据传输：在建立连接后，客户端和服务器可以随时向对方发送数据，数据以帧的形式进行传输。

3. 使用场景

实时聊天应用：如在线客服、即时通讯软件等，能实现消息的即时推送和接收。
实时数据展示：如股票行情、体育赛事比分等，数据的变化能及时更新到客户端。
多人游戏：玩家之间的操作和状态可以实时同步。

4. 优缺点

优点
- 实时性强：数据可以即时传输，无需频繁建立连接。
- 减少开销：相比于 HTTP 长轮询和短轮询，减少了不必要的请求和响应头，降低了服务器和客户端的负担。
- 全双工通信：客户端和服务器可以同时发送和接收数据。
缺点
- 兼容性问题：一些旧版本的浏览器可能不支持 WebSocket 协议。
- 安全性要求高：需要注意防止中间人攻击和数据泄露。

5. 与其他协议对比

与 HTTP 对比
- HTTP 是无状态、单向的，每次请求都需要建立新的连接；WebSocket 是有状态、全双工的，建立连接后可以持续通信。
- HTTP 适用于一次性的请求 - 响应场景；WebSocket 适用于实时通信场景。
与 HTTP 长轮询对比
- HTTP 长轮询是客户端发送请求后，服务器保持连接直到有新数据才返回响应，然后客户端再重新发起请求；WebSocket 是建立一次连接后可以持续双向通信。
- HTTP 长轮询在服务器没有新数据时也会占用连接资源，而 WebSocket 只有在有数据传输时才会占用带宽。