从 0 到 1 玩转 WebSocket💥

wayhome在哪
983 阅读4分钟

想象你在餐厅点餐，服务员（HTTP 协议）每次都要来回跑，问你要吃什么，你说完后她再去厨房传达，拿完菜又回来告诉你。要是你想加菜，还得重复这个过程，效率很低。而 WebSocket 就像给你和厨房装了一部对讲机，双方可以随时互相说话，不用服务员一次次跑腿，这就是实时通信的魅力。

屏幕截图 2025-05-05 174336.png

一、WebSocket 到底是什么？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它打破了 HTTP 协议 “请求 - 响应” 的模式。简单来说，HTTP 就像你给朋友发消息，必须等朋友回复后，你才能再发下一条；而 WebSocket 则像你们在微信里聊天，双方能随时发送消息，不用等对方先开口。

它能应用在很多场景中，比如网页版的在线聊天、股票价格实时更新、协同文档编辑等。只要是需要实时传递信息的地方，WebSocket 都能大显身手。

二、WebSocket 和 HTTP 有什么不一样？

  1. 通信模式：HTTP 是单向的 “请求 - 响应”，客户端发起请求，服务器响应；WebSocket 是双向的，客户端和服务器都能主动发送消息。

  2. 连接方式：HTTP 每次请求都要建立新连接，传输完数据就断开；WebSocket 只在一开始建立连接，后续数据传输不需要重复握手，节省资源。

  3. 数据格式：HTTP 传输的数据一般是文本格式，WebSocket 不仅能传输文本，还能传输二进制数据，更灵活高效。

三、前端如何使用 WebSocket？

接下来，我们用 JavaScript 代码来实际操作一下 WebSocket。

1. 建立连接

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket示例</title>
</head>
<body>
  <script>
    // 创建WebSocket对象，参数是服务器地址
    const socket = new WebSocket('ws://localhost:8080');
    // 连接成功时触发
    socket.onopen = function () {
      console.log('WebSocket连接已建立');
      // 向服务器发送消息
      socket.send('你好，WebSocket服务器！');
    };
    // 接收到服务器消息时触发
    socket.onmessage = function (event) {
      console.log('收到服务器消息:', event.data);
    };
    // 连接关闭时触发
    socket.onclose = function () {
      console.log('WebSocket连接已关闭');
    };
    // 连接出错时触发
    socket.onerror = function (error) {
      console.log('WebSocket连接错误:', error);
    };
  </script>
</body>
</html>

在这段代码中，我们通过new WebSocket('ws://localhost:8080')创建了一个 WebSocket 对象，这里的ws://localhost:8080是服务器地址，你需要根据实际情况修改。当连接成功时，onopen事件会被触发，我们在里面使用socket.send()方法向服务器发送消息；当收到服务器返回的消息时，onmessage事件会被触发，event.data就是服务器发送过来的内容。

2. 简单聊天示例

我们可以基于上面的代码，实现一个简单的网页端聊天功能。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket聊天示例</title>
</head>
<body>
  <input type="text" id="messageInput" placeholder="输入消息">
  <button onclick="sendMessage()">发送</button>
  <div id="messageDisplay"></div>
  <script>
    const socket = new WebSocket('ws://localhost:8080');
    const messageInput = document.getElementById('messageInput');
    const messageDisplay = document.getElementById('messageDisplay');
    socket.onopen = function () {
      console.log('WebSocket连接已建立');
    };
    socket.onmessage = function (event) {
      const message = document.createElement('p');
      message.textContent = '服务器:'+ event.data;
      messageDisplay.appendChild(message);
    };
    socket.onclose = function () {
      console.log('WebSocket连接已关闭');
    };
    socket.onerror = function (error) {
      console.log('WebSocket连接错误:', error);
    };
    function sendMessage() {
      const message = messageInput.value;
      if (message) {
        socket.send(message);
        const userMessage = document.createElement('p');
        userMessage.textContent = '你:'+ message;
        messageDisplay.appendChild(userMessage);
        messageInput.value = '';
      }
    }
  </script>
</body>
</html>

在这个示例中，我们添加了一个输入框和一个按钮。当点击按钮时，sendMessage函数会被调用，它会获取输入框的内容并发送给服务器，同时在页面上显示用户发送的消息。当收到服务器返回的消息时，会在页面上显示服务器发送的内容。

四、使用 WebSocket 需要注意什么？

  1. 兼容性：虽然现代浏览器基本都支持 WebSocket，但在开发时仍需检查兼容性，必要时可以使用 polyfill（兼容性垫片）。

  2. 安全问题：和 HTTP 类似，WebSocket 也有ws（非加密）和wss（加密，类似 HTTPS）两种协议，涉及敏感信息时一定要使用wss。

  3. 连接管理：WebSocket 连接建立后不会自动断开，如果长时间不使用，需要手动关闭连接，避免占用资源。

通过上面的学习，相信你已经对 WebSocket 有了基本的了解。WebSocket 在前端开发中是一项非常实用的技术，它能让你的网页实现更炫酷、更实时的功能。快去动手实践一下，打造属于自己的实时通信应用吧！如果你在学习过程中遇到问题，欢迎在评论区留言交流哦！

最后欢迎大家点赞关注加收藏~

avatar
文章
阅读
粉丝