node express 聊天应用程序 - Javascript (1)

📌 相关文章

📜 node express 聊天应用程序 - Javascript (1)

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

Node Express 聊天应用程序 - Javascript

本篇文章将介绍如何使用 Node.js 和 Express 框架搭建一款简单的聊天应用程序。

技术栈

Node.js
Express
Socket.io
HTML/CSS
JavaScript

步骤

1. 初始化项目

在本地新建一个空的文件夹，在命令行中进入该文件夹，执行以下命令进行初始化：

npm init -y

2. 安装依赖

安装 Express、Socket.io 和 body-parser：

npm install express socket.io body-parser --save

3. 创建服务器

创建一个名为 server.js 的文件，并输入以下代码：

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

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

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});

此时，在浏览器中打开 http://localhost:3000，会显示一段内容，表示服务器已经能够正确启动。

4. 创建客户端

在 public 文件夹下创建一个名为 index.html 的文件，并输入以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chat App</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="chat">
    <div class="messages"></div>
    <form id="messageForm">
      <input type="text" id="message" autocomplete="off" placeholder="Type your message...">
      <button>Send</button>
    </form>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="script.js"></script>
</body>
</html>

5. 创建客户端脚本

在 public 文件夹下创建一个名为 script.js 的文件，并输入以下代码：

const socket = io();

const messageForm = document.getElementById('messageForm');
const messageInput = document.getElementById('message');
const messages = document.querySelector('.messages');

messageForm.addEventListener('submit', (e) => {
  e.preventDefault();
  const message = messageInput.value;
  if (message.trim() === '') {
    return;
  }
  appendMessage({ message, from: 'me' });
  socket.emit('message', message);
  messageInput.value = '';
});

socket.on('message', (message) => {
  appendMessage({ message, from: 'other' });
});

function appendMessage({ message, from }) {
  const messageDiv = document.createElement('div');
  messageDiv.classList.add('message', `message-${from}`);
  messageDiv.innerText = message;
  messages.appendChild(messageDiv);
}

6. 创建样式表

在 public 文件夹下创建一个名为 style.css 的文件，并输入以下代码：

.chat {
  width: 500px;
  margin: 50px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}

.messages {
  height: 200px;
  border: 1px solid #ddd;
  border-radius: 5px;
  overflow-y: scroll;
  margin-bottom: 10px;
}

.message {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.message-me {
  background-color: #caf7e3;
  align-self: flex-end;
}

.message-other {
  background-color: #e6e6e6;
}

7. 运行程序

在命令行中输入以下命令启动服务器：

node server.js

在浏览器中打开 http://localhost:3000 即可访问聊天程序。

总结

本篇文章介绍了使用 Node.js 和 Express 框架搭建一款简单的聊天应用程序的步骤。通过以上步骤，我们可以在本地搭建一个简单的聊天应用程序，并体验实时的聊天交互。