NodeJS实现一个聊天室功能

一、Node.js实现聊天室功能的攻略

Node.js可以帮助我们快速搭建一个聊天室的功能，以下是完成这个过程的步骤。

创建一个Node.js项目并初始化

首先，需要在你的电脑上安装 Node.js，然后我们可以在控制台中输入下列命令创建项目。

mkdir node-chatroom
cd node-chatroom
npm init -y

安装和配置websocket

websocket是Node.js中实现实时通信的重要工具，我们需要先安装它。

npm install --save ws

websocket连接在服务器上的监听和管理，通过以下代码实现。

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

wss.on('connection', (ws) => {
  console.log('client connected');

  ws.on('message', (message) => {
    console.log(`Received message => ${message}`);
  });

  ws.send('ho!');
});

创建HTML文件

为了在浏览器中使用应用程序，我们需要创建一个 HTML 文件。

<!doctype html>
<html>
  <head>
    <title>Chatroom</title>
  </head>
  <body>
    <h1>Chatroom</h1>
    <form id="form">
      <input type="text" id="message" />
      <input type="submit" value="Send" />
    </form>
    <ul id="messages"></ul>
    <script>
      const socket = new WebSocket('ws://localhost:8080');
      const form = document.getElementById('form');
      const message = document.getElementById('message');
      const messages = document.getElementById('messages');

      form.addEventListener('submit', (event) => {
        event.preventDefault();
        socket.send(message.value);
        message.value = '';
      });

      socket.addEventListener('message', (event) => {
        const li = document.createElement('li');
        li.appendChild(document.createTextNode(event.data));
        messages.appendChild(li);
      });
    </script>
  </body>
</html>

运行应用程序

最后一步是运行该应用程序，我们需要运行以下 JavaScript 代码。

node server.js

开始聊天

我们可以在浏览器中输入 http://localhost:8080，看到聊天室的页面，输入文本并点击“发送”按钮，即可看到消息发送到浏览器。

二、示例之一：匿名聊天室

下面是一个使用Node.js和websocket实现匿名聊天室的示例。

创建一个Node.js项目并初始化

请参考第一节中的步骤。

安装和配置websocket

请参考第一节中的步骤。

创建HTML文件

为了在浏览器中使用应用程序，我们需要创建一个 HTML 文件。

<!doctype html>
<html>
  <head>
    <title>Anonymous Chatroom</title>
  </head>
  <body>
    <h1>Anonymous Chatroom</h1>
    <form id="form">
      <input type="text" id="message" />
      <input type="submit" value="Send" />
    </form>
    <ul id="messages"></ul>
    <script>
      const socket = new WebSocket('ws://localhost:8080');
      const form = document.getElementById('form');
      const message = document.getElementById('message');
      const messages = document.getElementById('messages');
      const name = "user" + Math.floor(Math.random() * 1000);

      form.addEventListener('submit', (event) => {
        event.preventDefault();
        socket.send(name + ": " + message.value);
        message.value = '';
      });

      socket.addEventListener('message', (event) => {
        const li = document.createElement('li');
        li.appendChild(document.createTextNode(event.data));
        messages.appendChild(li);
      });
    </script>
  </body>
</html>

运行应用程序

最后一步是运行该应用程序，我们需要运行以下 JavaScript 代码。

node server.js

开始聊天

我们可以在浏览器中输入 http://localhost:8080，看到聊天室的页面，输入文本并点击“发送”按钮，即可看到匿名的消息发送到浏览器。

示例之二：在线交友聊天室

下面是一个使用Node.js和websocket实现在线交友聊天室的示例。

创建一个Node.js项目并初始化

请参考第一节中的步骤。

安装和配置websocket

请参考第一节中的步骤。

创建HTML文件

为了在浏览器中使用应用程序，我们需要创建一个 HTML 文件。

<!doctype html>
<html>
  <head>
    <title>Online Dating Chatroom</title>
  </head>
  <body>
    <h1>Online Dating Chatroom</h1>
    <form id="name-form">
      <input type="text" id="name" placeholder="Enter your name" />
      <input type="submit" value="Join" />
    </form>
    <div id="chatroom" hidden>
      <form id="form">
        <input type="text" id="message" />
        <input type="submit" value="Send" />
      </form>
      <ul id="messages"></ul>
      <script>
        const nameForm = document.getElementById('name-form');
        const nameInput = document.getElementById('name');
        const chatroom = document.getElementById('chatroom');
        const form = document.getElementById('form');
        const message = document.getElementById('message');
        const messages = document.getElementById('messages');
        let socket;

        nameForm.addEventListener('submit', (event) => {
          event.preventDefault();
          const name = nameInput.value;
          socket = new WebSocket('ws://localhost:8080');

          socket.addEventListener('open', () => {
            chatroom.hidden = false;
            nameForm.hidden = true;
            socket.send("[" + name + "] has joined the chatroom.");

            form.addEventListener('submit', (event) => {
              event.preventDefault();
              socket.send(name + ": " + message.value);
              message.value = '';
            });
          });

          socket.addEventListener('message', (event) => {
            const li = document.createElement('li');
            li.appendChild(document.createTextNode(event.data));
            messages.appendChild(li);
          });

          socket.addEventListener('close', () => {
            socket.send("[" + name + "] has left the chatroom.");
          });
        });
      </script>
    </div>
  </body>
</html>

运行应用程序

最后一步是运行该应用程序，我们需要运行以下 JavaScript 代码。

node server.js

开始聊天

我们可以在浏览器中输入 http://localhost:8080，看到聊天室的页面，输入用户名并点击“加入”按钮，然后就可以进行聊天了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：NodeJS实现一个聊天室功能 - Python技术站

NodeJS实现一个聊天室功能

相关文章