简单的 socket.io 聊天 (1)

📌 相关文章

📜 简单的 socket.io 聊天 (1)

📅 最后修改于: 2023-12-03 15:41:08.985000 🧑 作者: Mango

使用 Socket.IO 创建简单的聊天室

Socket.IO 是一个在实时 Web 应用程序中使用的 JavaScript 库，它使服务器和客户端之间的双向通信变得容易。本文将介绍如何使用 Socket.IO 快速创建一个简单的聊天室。

在此之前，您需要先在本地安装 Node.js 和 npm。

创建应用程序

首先，通过运行以下命令在本地创建一个新的应用程序目录：

mkdir socket-io-chat
cd socket-io-chat
npm init -y

然后，使用以下命令安装所需的依赖项：

npm install express socket.io

创建服务器

在项目目录下创建一个名为 server.js 的文件。

首先，引入必要的模块：

const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);

其中，express 是一个 Web 应用框架，http 用于创建服务器，socket.io 用于实现实时双向通信。

然后，配置服务器以便向客户端提供静态文件：

app.use(express.static(__dirname + '/public'));

创建一个 get 路由，“/”将渲染聊天室的 HTML 页面：

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

最后，在服务器上监听来自客户端的连接，可以将其视为创建了一个“房间”，在该房间中所有已连接的客户端都可以相互通信：

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

现在，您的服务器应该已经准备好了。让我们测试它并开始创建聊天室的前端。

创建聊天室

在项目目录下创建一个名为 public 的目录，其中包含三个文件：index.html，style.css 和 main.js。

index.html

定义聊天室的基本结构，引入必要的文件，包括 Socket.IO 的客户端库：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Socket.IO Chat Room</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Socket.IO Chat Room</h1>
  <div id="messages"></div>
  <form id="message-form">
    <input type="text" id="message-input" autocomplete="off">
    <button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script src="main.js"></script>
</body>
</html>

其中，id 为 messages 的 div 元素用于显示聊天记录，id 为 message-form 的 form 元素用于用户输入和发送聊天消息。客户端还需要连接到 Socket.IO 服务器，因此需要引入 socket.io.js 文件，以及在后面的 main.js 文件中使用的客户端 Socket.IO 实例。

style.css

定义聊天室的基本样式：

body {
  font-family: sans-serif;
}
h1 {
  text-align: center;
}
#messages {
  border: 1px solid black;
  height: 500px;
  margin-bottom: 10px;
  overflow-y: scroll;
  padding: 10px;
}
#message-form input[type=text] {
  width: 80%;
}
#message-form button {
  width: 18%;
}

main.js

现在，我们可以处理客户端代码。首先，创建 Socket.IO 的客户端实例，并使用它连接到服务器：

const socket = io();

然后，处理消息发送表单的提交事件，向服务器发送新消息的文本：

const messageInput = document.getElementById('message-input');
const messageForm = document.getElementById('message-form');

messageForm.addEventListener('submit', function(event) {
  event.preventDefault();
  const messageText = messageInput.value.trim();
  if (messageText === '') {
    return;
  }
  socket.emit('new-message', messageText);
  messageInput.value = '';
});

最后，监听来自服务器的新消息，并将其添加到消息记录中：

const messages = document.getElementById('messages');

socket.on('new-message', function(messageText) {
  const messageElement = document.createElement('div');
  messageElement.innerText = messageText;
  messages.appendChild(messageElement);
});

现在，您可以运行服务器并测试聊天室，通过运行以下命令启动服务器：

node server.js

然后在浏览器中打开 http://localhost:3000。当您向聊天室发送消息时，其他连接到聊天室的用户将能够看到新的消息。

示例代码可在 GitHub 上进行查看和下载。

参考文献：

Socket.IO 官方文档