Node.js + Socket.io 实现即时聊天功能教程-JavaScript中文网-JavaScript教程资源分享门户

简介

随着互联网的快速发展，即时通讯已经成为人们日常生活中不可或缺的一部分。在前端领域，我们可以使用 Node.js 和 Socket.io 来实现即时聊天功能。本文将介绍如何使用 Node.js 和 Socket.io 来实现一个简单的即时聊天应用。

前置知识

在开始学习本文所介绍的内容之前，你需要对以下内容有一定的了解：

HTML、CSS、JavaScript 基础知识
Node.js 和 npm 的基础知识

如果你对以上内容不够熟悉，建议先学习相关知识再来阅读本文。

安装

首先，我们需要安装 Node.js 和 Socket.io。可以在 Node.js 官网上下载并安装 Node.js，安装完成后，打开终端并运行以下命令来安装 Socket.io：

npm install socket.io

实现

服务器端

我们先来实现服务器端的代码。创建一个名为 server.js 的文件，输入以下内容：

// javascriptcn.com 代码示例
const app = require('http').createServer(handler);
const io = require('socket.io')(app);
const fs = require('fs');

app.listen(8080);

function handler(req, res) {
  fs.readFile(__dirname + '/index.html', function (err, data) {
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    res.writeHead(200);
    res.end(data);
  });
}

io.on('connection', function (socket) {
  console.log('a user connected');

  socket.on('disconnect', function () {
    console.log('user disconnected');
  });

  socket.on('chat message', function (msg) {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

以上代码中，我们创建了一个 HTTP 服务器，并使用 Socket.io 将其转换为 WebSocket 服务器。当客户端连接到服务器时，服务器会输出一条日志，同时监听客户端发送的 chat message 事件，接收到事件后，将消息转发给所有连接到服务器的客户端。

客户端

接下来，我们来实现客户端的代码。创建一个名为 index.html 的文件，输入以下内容：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <title>Socket.io Chat Example</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: Arial, sans-serif;
        font-size: 14px;
        line-height: 1.5;
      }

      .container {
        width: 500px;
        margin: 0 auto;
      }

      .chat {
        border: 1px solid #ddd;
        padding: 20px;
        margin-top: 20px;
      }

      .chat-message {
        margin-bottom: 10px;
      }

      .chat-form {
        margin-top: 10px;
      }

      .chat-form input[type="text"] {
        width: 100%;
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ddd;
        border-radius: 3px;
      }

      .chat-form input[type="submit"] {
        display: block;
        margin-top: 10px;
        padding: 10px;
        font-size: 14px;
        background-color: #4CAF50;
        color: #fff;
        border: none;
        border-radius: 3px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="chat">
        <div class="chat-message"></div>
        <form class="chat-form">
          <input type="text" placeholder="Type your message here">
          <input type="submit" value="Send">
        </form>
      </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
      const socket = io();

      const chatMessage = document.querySelector('.chat-message');
      const chatForm = document.querySelector('.chat-form');
      const chatInput = chatForm.querySelector('input[type="text"]');

      chatForm.addEventListener('submit', function (e) {
        e.preventDefault();

        if (chatInput.value) {
          socket.emit('chat message', chatInput.value);
          chatInput.value = '';
        }
      });

      socket.on('chat message', function (msg) {
        const message = document.createElement('div');
        message.className = 'chat-message';
        message.textContent = msg;
        chatMessage.appendChild(message);
      });
    </script>
  </body>
</html>

以上代码中，我们创建了一个简单的聊天界面，并使用 Socket.io 客户端库连接到服务器。当用户输入消息并点击发送按钮时，客户端会将消息发送到服务器，并将消息显示在页面上。

运行

将 server.js 和 index.html 文件放在同一个文件夹中，然后在终端中运行以下命令：

node server.js

打开浏览器并访问 http://localhost:8080，即可看到聊天界面。打开多个浏览器窗口并分别访问该页面，即可在多个浏览器之间实现即时聊天。

总结

本文介绍了如何使用 Node.js 和 Socket.io 来实现一个简单的即时聊天应用。通过学习本文所介绍的内容，你可以了解到如何使用 Socket.io 来实现 WebSocket 功能，并了解到如何在前端中使用 Socket.io 客户端库连接到服务器。希望本文能够对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6559c7d5d2f5e1655d4352b5