基于websocket实现简单聊天室对话

下面是基于websocket实现简单聊天室对话的完整攻略。

简介

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得浏览器和服务器之间的数据交换变得更加高效、实时。利用 WebSocket 技术，我们可以很容易地实现一个简单的聊天室对话功能。

步骤

1. 启动WebSocket服务端

WebSocket 服务端可以选择使用不同的编程语言实现，例如 Java、Node.js、Python 等。在此我们以 Node.js 作为例子，启动一个最简单的 WebSocket 服务端。

安装 ws 模块：

npm install ws

编写代码：

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

代码说明：

使用 require('ws') 引入 ws 模块。
创建一个 WebSocket 服务端，监听 9000 端口。
当有新的客户端连接时，服务端回调函数监听到 connection 事件并执行。
在客户端发送消息时，服务端回调函数监听到 message 事件并执行。
在服务端接收到消息后，遍历所有连接的客户端并将消息发送给每个客户端。

2. 编写WebSocket客户端

在客户端上使用 WebSocket 需要先创建一个 WebSocket 对象，并通过它向服务端发送和接收消息。

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

socket.addEventListener('open', function (event) {
  socket.send('Hello Server!');
});

socket.addEventListener('message', function (event) {
  console.log('Message from server', event.data);
});

代码说明：

使用 new WebSocket() 创建一个 WebSocket 对象，通过第一个参数指定服务端的地址。
在连接建立成功后，回调函数监听到 open 事件并执行，发送一条消息给服务端。
当有消息从服务端传回来时，回调函数监听到 message 事件并执行，将消息输出到控制台上。

3. 完整示例代码

服务端代码 server.js：

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    wss.clients.forEach(function each(client) {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

客户端代码 client.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket Client</title>
</head>
<body>
  <input type="text" id="input" placeholder="Type your message...">
  <button id="send">Send</button>
  <div id="output"></div>
  <script>
    const socket = new WebSocket('ws://localhost:9000');

    const input = document.getElementById('input');
    const sendButton = document.getElementById('send');
    const output = document.getElementById('output');

    socket.addEventListener('open', function (event) {
      console.log('Connection established');
    });

    socket.addEventListener('message', function (event) {
      output.innerHTML += '<p>' + event.data + '</p>';
    });

    sendButton.addEventListener('click', function () {
      socket.send(input.value);
      input.value = '';
    });
  </script>
</body>
</html>

在浏览器中打开 client.html 文件，输入要发送的消息并点击“Send”按钮即可完成简单的聊天室对话。

总结

通过以上步骤，我们可以很容易地实现基于 WebSocket 的简单聊天室对话功能。其它编程语言实现方式基本相同，只需更改相关语言的 WebSocket 模块即可。如果需要更加完善的功能，在此基础上可以继续扩展。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于websocket实现简单聊天室对话 - Python技术站

基于websocket实现简单聊天室对话

简介

步骤

1. 启动WebSocket服务端

2. 编写WebSocket客户端

3. 完整示例代码

总结

相关文章