实战Websocket：从入门到自闭

站长

2023年05月27日 19:19 · 阅读数 13

实战Websocket：从入门到自闭

作为前端开发人员，我们经常需要使用 Websocket 实现实时通信功能，如聊天室、实时数据展示、游戏等。近期我在一家公司实习工作中，也遇到了使用 Websocket 的场景，所以开始了解 Websocket 的基本原理和实战应用。在本文中，我将分享我的学习笔记，带领大家入门 Websocket。

Websocket是一种用于实现双向通信的网络协议，能够在客户端和服务器之间实时传输数据。在前端领域，Websocket可以用于实现聊天室、实时数据展示、游戏等应用。本文将介绍如何使用Websocket实现一个简单的聊天室应用。

准备工作

在开始实战之前，需要进行一些准备工作。首先，需要了解Websocket的基本原理和相关API，推荐学习MDN文档。其次，需要在本地搭建一个服务器环境，可以选择Node.js、Python Flask等后端框架。本文我们选择使用node.js作为我们的服务器环境，客户端语言用的是原生的三件套。

实现简易聊天室应用

创建WebSocket对象

在客户端创建WebSocket对象，需要指定连接的服务器地址和端口号，例如：

const socket = new WebSocket('ws://localhost:8080');

监听WebSocket事件

Websocket对象有四个主要的事件：

onopen：当WebSocket连接建立成功后触发。
onmessage：当WebSocket接收到服务器发送的消息时触发。
onclose：当WebSocket关闭连接时触发。
onerror：当WebSocket发生错误时触发。

在这里我们只需要监听onopen和onmessage事件，例如：

socket.onopen = () => {
  console.log('WebSocket连接已建立。');
};

socket.onmessage = event => {
  const data = JSON.parse(event.data);
  console.log(`收到消息：${data.message}`);
};

发送消息

在聊天室应用中，用户需要发送消息到服务器，然后服务器将消息广播给其他用户。我们可以通过调用WebSocket对象的send方法来发送消息，例如：

const message = {
  username: 'John',
  message: 'Hello, World!'
};

socket.send(JSON.stringify(message));

广播消息

在服务器端，我们需要监听WebSocket连接事件，并将接收到的消息广播给所有客户端。具体实现可以使用Node.js的ws库，例如：

const WebSocket = require('ws');

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

wss.on('connection', ws => {
  console.log('burgerBro--WebSocket连接已建立。');

  ws.on('message', message => {
    console.log(`收到消息：${message}`);

    // 广播消息给所有客户端
    wss.clients.forEach(client => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

步骤5：客户端页面展示

最后一步，我们需要在客户端页面上展示聊天记录和输入框，让用户可以发送和接收消息。具体实现可以使用 HTML、CSS 和 JavaScript。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title >聊天室</title>
</head>
<body>
  <div id="chat">burgerBro----websock入门</div>
  <input type="text" id="message" placeholder="请输入消息--burgerBro">
  <button id="send">发送</button>

</body>
  
<script>
    const socket = new WebSocket('ws://localhost:8080');

    const chat = document.getElementById('chat');
    const message = document.getElementById('message');
    const send = document.getElementById('send');

    socket.onopen = () => {
      console.log('burgerBro-WebSocket连接已建立。');
    };

    socket.onmessage = event => {
      const data = JSON.parse(event.data);
      const p = document.createElement('p');
      p.innerText = `${data.username}: ${data.message}`;
      chat.appendChild(p);
      chat.scrollTop = chat.scrollHeight;
    };

    send.addEventListener('click', () => {
      const data = {
        username: 'John',
        message: message.value
      };
      socket.send(JSON.stringify(data));
      message.value = '';
    });
</script>
<style>
#chat {
    height: 500px; 
    overflow-y: scroll;
    }
</style>
</html>

在上述代码中，我们使用了 HTML、CSS 和 JavaScript 分别实现了聊天记录展示、消息输入框和发送按钮的功能。当用户发送消息时，我们将消息打包成 JSON 格式，然后通过 WebSocket 对象的 send 方法发送到服务器。当服务器接收到消息后，会将消息广播给所有客户端，客户端会将消息展示在聊天记录中。

总结

通过本文的实战演示，我们了解了如何使用 WebSocket 实现一个简单的聊天室应用，当然只是完成了通信方面的基础代码，在页面上只是随意写了一下还请各位多多包涵，后续有空会把完整页面给大家补上。当然，Websocket 的应用远不止于此，它还可以用于实时数据展示、游戏等。希望本文能够对大家学习 Websocket 有所帮助。