沃梦达 / IT编程 / 前端开发 / 正文

如何用JS WebSocket实现简单聊天

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

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

什么是WebSocket?

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

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

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

  1. 创建WebSocket

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

const ws = new WebSocket('ws://localhost:3000');
  1. 监听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连接关闭!');
});
  1. 发送消息到服务端

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

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

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

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

当接收到服务端发送的消息时,触发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实现简单聊天