发一个基于 Nodejs 的 socketio 和 express 聊天室（可以发图片）

发一个基于 Nodejs 的 socketio 和 express 聊天室（可以发图片）

ui.jpg github:https://github.com/kiroChen/node_chat 貌似网上有很多类似的。哈，第一次发，求勿喷

7 回复

好的，以下是一个基于 Node.js、Socket.IO 和 Express 构建的简单聊天室示例。该聊天室允许用户发送文本消息，并且可以发送图片。以下是详细的实现步骤和代码示例。

项目结构

node_chat/
├── public/
│   ├── css/
│   │   └── style.css
│   ├── js/
│   │   └── client.js
│   └── images/
├── views/
│   └── index.ejs
├── app.js
└── package.json

安装依赖

首先，确保你已经安装了 Node.js 和 npm。然后在项目根目录下运行：

npm init -y
npm install express socket.io ejs

package.json

确保你的 package.json 文件中包含以下依赖项：

{
  "name": "node_chat",
  "version": "1.0.0",
  "main": "app.js",
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "socket.io": "^4.6.2",
    "ejs": "^3.1.8"
  }
}

app.js

这是服务器端的主要文件。

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

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.set('view engine', 'ejs');
app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  socket.on('chat message', (msg) => {
    io.emit('chat message', msg);
  });

  socket.on('image upload', (base64Data) => {
    io.emit('image upload', base64Data);
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

views/index.ejs

这是客户端的页面模板。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat Room</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <div id="chat-container">
    <ul id="messages"></ul>
    <form id="chat-form">
      <input id="message-input" autocomplete="off" placeholder="Type your message...">
      <input type="file" id="image-input" accept="image/*">
      <button id="send-button">Send</button>
    </form>
  </div>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/js/client.js"></script>
</body>
</html>

public/js/client.js

这是客户端的 JavaScript 文件。

const socket = io();

document.getElementById('chat-form').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const messageInput = document.getElementById('message-input');
  const message = messageInput.value;

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

  const fileInput = document.getElementById('image-input');
  if (fileInput.files.length > 0) {
    const file = fileInput.files[0];
    const reader = new FileReader();
    reader.onloadend = function() {
      socket.emit('image upload', reader.result);
    };
    reader.readAsDataURL(file);
    fileInput.value = '';
  }
});

socket.on('chat message', function(msg) {
  const item = document.createElement('li');
  item.textContent = msg;
  document.getElementById('messages').appendChild(item);
});

socket.on('image upload', function(base64Data) {
  const img = document.createElement('img');
  img.src = base64Data;
  document.getElementById('messages').appendChild(img);
});

public/css/style.css

简单的样式文件。

#chat-container {
  width: 300px;
  margin: 0 auto;
}

#messages {
  list-style-type: none;
  padding: 0;
  height: 400px;
  overflow-y: scroll;
}

#messages li {
  margin-bottom: 10px;
}

#chat-form {
  display: flex;
}

#message-input {
  flex: 1;
}

#send-button {
  margin-left: 10px;
}

运行项目

在项目根目录下运行：

node app.js

打开浏览器访问 http://localhost:3000，你将看到一个简单的聊天室界面，可以发送文本消息和图片。

GitHub 链接

你可以在这个 GitHub 仓库 中找到完整的代码示例。

希望这个示例对你有所帮助！


没租服务器，就没有demo了。

用了cluster，但没有做粘性session，会有问题。

mark一下

楼主，你代码中注释了一些api,比如各个emit的区别，还有findWhere()这样的函数，我怎么在官方的api上没找到啊，原谅我的粗心或者我还 真不会用api

👍 自豪地采用 CNodeJS ionic

要创建一个基于 Node.js 的聊天室应用，可以使用 Express 作为 Web 框架，Socket.IO 作为实时通信库。以下是一个简单的实现示例。

1. 初始化项目

首先，初始化一个新的 Node.js 项目并安装必要的依赖包：

mkdir node-chat
cd node-chat
npm init -y
npm install express socket.io

2. 创建服务器

创建 server.js 文件，用于设置 Express 服务器和 Socket.IO 服务：

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

// 创建Express应用
const app = express();
// 创建HTTP服务器
const server = http.createServer(app);
// 创建Socket.IO实例
const io = socketIo(server);

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

// 监听连接事件
io.on('connection', (socket) => {
    console.log('New client connected');

    // 监听message事件
    socket.on('chat message', (msg) => {
        io.emit('chat message', msg);
    });

    // 监听disconnect事件
    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server is running on port 3000');
});

3. 创建前端页面

创建 index.html 文件，用于显示聊天界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
</head>
<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();
        const form = document.getElementsByTagName('form')[0];
        const input = document.getElementById('m');
        const messages = document.getElementById('messages');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        });

        socket.on('chat message', function(msg) {
            const item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
        });
    </script>
</body>
</html>

4. 运行服务器

在终端中运行以下命令启动服务器：

node server.js

现在打开浏览器访问 http://localhost:3000，你将看到一个基本的聊天室。用户可以在聊天室中发送消息，并且所有在线用户的浏览器都会接收到并显示这些消息。

扩展功能

如果你想支持图片发送，可以在客户端和服务器端进行相应的处理，允许用户上传文件并通过 Socket.IO 发送图片数据或链接。

回到顶部