做了个Nodejs主题头像聊天室，作为socketio练习。

yibo5220 1楼

做了个Node.js主题头像聊天室，作为Socket.io练习

简介

最近我做了一个基于Node.js的聊天室项目，使用了Socket.io来实现实时通信。在这个聊天室中，用户可以根据不同的主题选择不同的头像，并且可以在聊天过程中更改头像。这个项目不仅是一个技术实践，也是一个关于实时通信应用的设计探索。

功能介绍

房间列表页面：用户可以查看不同的房间列表，每个房间有不同的主题，从而可以选择不同的头像。
聊天页面：用户可以发送消息并实时看到其他人的消息。点击头像可以更改当前使用的头像。
跨浏览器支持：项目兼容IE浏览器，但IE下的视觉效果可能不是最佳。

技术栈

Node.js：后端服务框架。
Express：用于构建Web应用的框架。
Socket.io：用于实现客户端与服务器之间的实时双向通信。
EJS：模板引擎，用于渲染HTML页面。
CSS/Bootstrap：用于样式设计，确保良好的用户体验。

示例代码

服务器端（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'));

let users = [];

io.on('connection', (socket) => {
    console.log('New client connected');

    socket.on('new user', (data) => {
        users.push(data);
        io.emit('user list', users);
    });

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

    socket.on('disconnect', () => {
        users = users.filter(user => user !== socket.username);
        io.emit('user list', users);
        console.log('Client disconnected');
    });
});

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

客户端（index.ejs）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div id="avatar-selector">
        <img src="/images/avatar1.png" onclick="changeAvatar('/images/avatar1.png')">
        <img src="/images/avatar2.png" onclick="changeAvatar('/images/avatar2.png')">
    </div>
    <ul id="users-list"></ul>
    <input id="m" autocomplete="off" /><button>Send</button>
    <ul id="messages"></ul>

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

客户端JavaScript（chat.js）

const socket = io();

document.querySelector('button').addEventListener('click', () => {
    const message = document.getElementById('m').value;
    socket.emit('chat message', message);
    document.getElementById('m').value = '';
});

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

function changeAvatar(src) {
    socket.emit('change avatar', src);
}

以上代码展示了如何创建一个基本的聊天室，包括用户登录、发送消息以及更改头像的功能。希望这个项目能为你提供一些启发！

vueper 2楼

很不错，学习了！

ionicwang 3楼

楼主，这个能不能开放源码啊，学习一下。。

eggper 4楼

http://118.244.155.95:3001/room/120 是不是可以随便输出就自建聊天室？

还是固定的几个聊天室？能不能有个表单参数，然后根据用户输入动态创建聊天室？

zlyuanteng 5楼

木有。。暂时是固定的。。聊天室多了后，不知道怎么分配每个socket的信息。。。

itying888 6楼作者

这个聊天室项目使用了Node.js作为后端服务，并通过Socket.IO实现了实时通信功能。以下是一个简单的示例，展示如何搭建一个基本的基于Socket.IO的聊天室，并实现选择头像的功能。

示例代码

后端（Node.js + Socket.IO）

首先，你需要安装express和socket.io库：

npm install express socket.io

然后创建一个简单的服务器：

// server.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.use(express.static(__dirname));

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

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

  socket.on('change avatar', (avatar) => {
    socket.emit('avatar changed', avatar);
  });

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

server.listen(3001, () => {
  console.log('Listening on port 3001');
});

前端（HTML + JavaScript）

在前端，我们创建两个页面：一个用于显示聊天室列表，另一个用于实际的聊天室。聊天室页面将包含一个头像选择器。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Chat Room List</title>
</head>
<body>
  <h1>Chat Room List</h1>
  <ul id="rooms">
    <!-- 房间列表动态生成 -->
  </ul>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    document.getElementById('rooms').innerHTML = `
      <li><a href="/room/room1">Room 1 - Avatar 1</a></li>
      <li><a href="/room/room2">Room 2 - Avatar 2</a></li>
    `;
  </script>
</body>
</html>

<!-- room.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
</head>
<body>
  <div id="avatar-selector">
    <img src="/images/avatar1.png" onclick="changeAvatar('/images/avatar1.png')">
    <img src="/images/avatar2.png" onclick="changeAvatar('/images/avatar2.png')">
  </div>
  <ul id="messages"></ul>
  <input id="m" autocomplete="off" /><button onclick="sendMessage()">Send</button>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const messages = document.getElementById('messages');
    const input = document.getElementById('m');

    function sendMessage() {
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    }

    function changeAvatar(avatar) {
      socket.emit('change avatar', avatar);
      document.querySelector('#avatar-selector img[onclick="changeAvatar(\''+avatar+'\')"]').style.border = '2px solid red';
    }

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

    socket.on('avatar changed', function(avatar) {
      document.querySelector('#avatar-selector img[src="'+avatar+'"]').style.border = '2px solid red';
    });
  </script>
</body>
</html>

解释

后端：监听客户端连接，并处理消息发送、头像更改等事件。
前端：提供一个聊天室列表页面和一个聊天室页面，允许用户选择头像并发送消息。

此示例展示了如何设置基本的Socket.IO聊天室，并允许用户通过点击头像来更改他们的头像。实际部署时，你可能需要添加更多的错误处理和样式调整以增强用户体验。