如何用JS WebSocket实现简单聊天

下面详细讲解如何用JS WebSocket实现简单聊天的完整攻略：

什么是WebSocket？

WebSocket是HTML5提出的一种应用层协议，它是HTML5新引入的特性，使得浏览器和Web服务器之间可以进行双向通信，而不需要通过轮询的方式模拟实现。WebSocket协议通过一次 HTTP 握手，然后交换数据。

如何使用WebSocket实现简单的聊天？

WebSocket提供了用于在客户端（如浏览器）和服务器之间进行全双工通信的API。使用WebSocket实现简单聊天的步骤如下：

创建WebSocket

通过JavaScript中的WebSocket构造函数，创建WebSocket对象。代码如下：

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

监听WebSocket的事件：open、message和close

WebSocket对象有三个重要的事件：open、message和close。当WebSocket连接成功后，触发open事件；当接收到服务端发送的消息时，触发message事件；当WebSocket连接关闭时，触发close事件。通过监听这三个事件，我们可以完成双向通信。

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

// WebSocket连接成功事件
ws.addEventListener('open', (event) => {
  console.log('WebSocket连接成功！');
});

// 接收到服务端发送消息事件
ws.addEventListener('message', (event) => {
  console.log('接收到服务端发送的消息：', event.data);
});

// WebSocket连接关闭事件
ws.addEventListener('close', (event) => {
  console.log('WebSocket连接关闭！');
});

发送消息到服务端

通过WebSocket对象的send()方法发送消息到服务端。

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

ws.addEventListener('open', (event) => {
  console.log('WebSocket连接成功！');

  // 发送消息到服务端
  ws.send('Hello Server!');
});

从服务端接收消息

当接收到服务端发送的消息时，触发message事件。可以通过监听这个事件，将接收到的消息显示在页面上。

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

ws.addEventListener('open', (event) => {
  console.log('WebSocket连接成功！');

  ws.send('Hello Server!');
});

// 将接收到的消息显示在页面上
ws.addEventListener('message', (event) => {
  const message = event.data;
  const li = document.createElement('li');
  li.innerText = message;
  document.querySelector('#messages').appendChild(li);
});

以上是使用WebSocket实现简单聊天的基本步骤，下面给出一个完整的示例供参考。

示例1：使用WebSocket和Node.js实现简单聊天

前端代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebSocket简单聊天</title>
</head>
<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="input" type="text" autocomplete="off">
    <button>发送</button>
  </form>

  <script>
    const ws = new WebSocket('ws://localhost:3000');

    ws.addEventListener('open', (event) => {
      console.log('WebSocket连接成功！');
    });

    // 将接收到的消息显示在页面上
    ws.addEventListener('message', (event) => {
      const message = event.data;
      const li = document.createElement('li');
      li.innerText = message;
      document.querySelector('#messages').appendChild(li);
    });

    // 发送消息到服务端
    const form = document.querySelector('form');
    form.addEventListener('submit', (event) => {
      event.preventDefault(); // 阻止表单默认跳转行为
      const input = document.querySelector('#input');
      const message = input.value;
      input.value = ''; // 清空输入框
      ws.send(message);
    });
  </script>
</body>
</html>

后端代码（使用Node.js和WebSocket库）：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', (ws) => {
  console.log('WebSocket连接成功！');

  // 接收到客户端发送的消息
  ws.on('message', (message) => {
    console.log('接收到客户端发送的消息：', message);

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

  // WebSocket连接关闭
  ws.on('close', () => {
    console.log('WebSocket连接关闭！');
  });
});

此示例中，前端和后端使用WebSocket库进行通信，前端页面包含一个输入框和一个发送按钮，用户输入消息后点击发送按钮即可将消息发送到后端，后端收到消息后再将消息广播给所有客户端。

示例2：使用WebSocket和PHP实现简单聊天

前端代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>WebSocket简单聊天</title>
</head>
<body>
  <ul id="messages"></ul>
  <form action="">
    <input id="input" type="text" autocomplete="off">
    <button>发送</button>
  </form>

  <script>
    const ws = new WebSocket('ws://localhost:3000');

    ws.addEventListener('open', (event) => {
      console.log('WebSocket连接成功！');
    });

    // 将接收到的消息显示在页面上
    ws.addEventListener('message', (event) => {
      const message = event.data;
      const li = document.createElement('li');
      li.innerText = message;
      document.querySelector('#messages').appendChild(li);
    });

    // 发送消息到服务端
    const form = document.querySelector('form');
    form.addEventListener('submit', (event) => {
      event.preventDefault(); // 阻止表单默认跳转行为
      const input = document.querySelector('#input');
      const message = input.value;
      input.value = ''; // 清空输入框
      ws.send(message);
    });
  </script>
</body>
</html>

后端代码（使用PHP和Ratchet库）：

require __DIR__ . '/vendor/autoload.php';

use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;
use Ratchet\Http\HttpServer;
use Ratchet\WebSocket\WsServer;
use Ratchet\Server\IoServer;

class Chat implements MessageComponentInterface {
  protected $clients;

  public function __construct() {
    $this->clients = new \SplObjectStorage;
  }

  public function onOpen(ConnectionInterface $conn) {
    echo "WebSocket连接成功！\n";
    $this->clients->attach($conn);
  }

  public function onMessage(ConnectionInterface $from, $msg) {
    echo "接收到客户端发送的消息： $msg\n";
    foreach ($this->clients as $client) {
      if ($from !== $client) {
        $client->send($msg);
      }
    }
  }

  public function onClose(ConnectionInterface $conn) {
    echo "WebSocket连接关闭！\n";
    $this->clients->detach($conn);
  }

  public function onError(ConnectionInterface $conn, Exception $e) {
    echo "出错了： {$e->getMessage()}\n";
    $conn->close();
  }
}

$server = IoServer::factory(
  new HttpServer(
    new WsServer(
      new Chat()
    )
  ),
  3000
);

$server->run();

此示例中，前端和后端使用Ratchet库进行通信，前端页面和示例1相同，只是后端代码使用了PHP代替Node.js。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何用JS WebSocket实现简单聊天 - Python技术站