面试之：WebSocket协议

是染染啊
644 阅读3分钟

WebSocket协议简介

WebSocket是HTML5引入的一种网络通信协议，它提供了在单个TCP连接上进行全双工通信的能力，允许服务器和客户端之间实现实时数据交换，常用于需要即时更新的应用如在线游戏、实时数据分析、聊天应用等。通过WebSocket，可以更高效地实现双向通信，减少延迟并提高数据传输效率。

相信有很多小伙伴在面试中都被问到过这个问题。下面我将用一个简单的例子来理解一下什么是WebSocket协议。

为什么WebSocket可以实现数据的实时共享，而HTTP不可以？

  • WebSocket能实现实时数据共享是因为它提供了全双工通信机制，允许服务器和客户端在建立连接后随时相互发送数据，无需等待请求即可实现即时通讯。
  • HTTP基于请求-响应模型，每次数据交换都需要由客户端发起请求，这导致了额外的延迟和开销，不适合需要持续实时更新的场景。

HTTP与WebSocket协议的基本流程

HTTP协议依赖于请求-响应模型，这意味着客户端必须首先向服务器发起请求，然后等待服务器的响应。这种模式虽然简单有效，但并不适合需要持续更新的应用场景，因为它会导致额外的延迟和开销。

相比之下，WebSocket协议提供了一个持久化的连接，一旦连接建立，服务器和客户端就可以自由地发送消息，不需要每次都由客户端发起请求。这种方式大大减少了延迟，并且使得实时数据共享成为可能。

HTTP vs WebSocket

实现代码示例

以下是一个使用Koa框架结合koa-websocket插件创建WebSocket服务的例子：

const Koa = require('koa');
const websocket = require('koa-websocket');

// 创建WebSocket服务
const app = websocket(new Koa());
let all_client = new Set();

app.use(async (ctx, next) => {
    ctx.body = `
        <body>
        <h1>WebSocket Example</h1>
        <div id='messages' style='height:300px;overflow-y:scroll;'></div>
        <input type='text' id='input'/>
        <button onclick="sendMessage()">发送</button>
        <script>
        let input = document.querySelector('#input');
        let messages = document.querySelector('#messages');
        const ws = new WebSocket('ws://localhost:3000');
        
        ws.onmessage = function(e) {
            messages.innerHTML += e.data + '<br/>'; 
        }
        
        function sendMessage() {
           const msg = input.value.trim();
           if(msg.length === 0) return;
           ws.send(msg.toString());
           input.value = ''; 
        }
        </script>
        </body>
    `;
});

// 处理所有的WebSocket请求
app.ws.use(async (ctx, next) => {
    all_client.add(ctx.websocket);
    
    ctx.websocket.on('message', (msg) => {
        for(let client of all_client) {
            client.send(msg.toString());
        }
    });
    
    ctx.websocket.on('close', () => {
        all_client.delete(ctx.websocket);
    });
});

// 监听端口
app.listen(3000, () => {
    console.log('Server is running at port 3000');
});

这段代码实现了以下功能：

  • 客户端：用户输入消息后点击“发送”，消息将被发送到服务器并通过WebSocket协议广播给所有连接的客户端。
  • 服务器：监听客户端的消息，并将收到的消息广播给所有已连接的客户端，包括消息发送者本身。

WebSocket Example Animation

总结

WebSocket提供了一种高效且直接的方法来进行客户端与服务器之间的实时通信，克服了HTTP在实时性方面的局限性。对于那些需要快速响应的应用程序来说，WebSocket是一个非常理想的解决方案。通过这个简单的例子，我们可以看到如何利用WebSocket来构建支持实时数据交换的应用。无论是在线游戏还是即时通讯工具，WebSocket都为开发者提供了强大的工具来实现这些目标。

通过对比HTTP和WebSocket的工作原理及其应用场景，可以看出WebSocket在处理实时数据交换方面具有显著优势。希望这篇文章能够帮助你更好地理解WebSocket协议及其重要性。

avatar
文章
阅读
粉丝