前端聊天室

admin3个月前 (04-22)it知识224
<!DOCTYPE html>
<html>
<head>
  <title>Socket.IO 聊天室</title>
  <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
  <style>
    .chat-box { height: 400px; border: 1px solid #ccc; overflow-y: auto; padding: 10px; }
    .message { margin: 8px 0; padding: 8px; border-radius: 4px; }
    .self { background: #e3f2fd; margin-left: 20%; }
    .others { background: #f5f5f5; margin-right: 20%; }
    #user-list { position: fixed; right: 20px; top: 20px; background: white; padding: 10px; border: 1px solid #ddd; }
  </style>
</head>
<body>
  <div id="user-list"></div>
  <div class="chat-box" id="chatBox"></div>
  <input type="text" id="messageInput" placeholder="输入消息..." style="width: 70%">
  <button onclick="sendMessage()">发送</button>
  <script>
    // 初始化连接
    const socket = io('wss://your-chat-server.com', {
      auth: { userId: localStorage.getItem('userId') || `user_${Date.now()}` },
      reconnectionAttempts: 3,
      transports: ['websocket']
    });
    // 消息发送函数
    function sendMessage() {
      const input = document.getElementById('messageInput');
      if (input.value.trim()) {
        socket.emit('chatMessage', {
          text: input.value,
          time: new Date().toISOString()
        });
        input.value = '';
      }
    }
    // 监听服务端消息
    socket.on('chatMessage', (msg) => {
      const isSelf = msg.userId === socket.auth.userId;
      const div = document.createElement('div');
      div.className = `message ${isSelf ? 'self' : 'others'}`;
      div.innerHTML = `<b>${msg.nickname}</b>: ${msg.text}<br><small>${new Date(msg.time).toLocaleTimeString()}</small>`;
      document.getElementById('chatBox').appendChild(div);
    });
    // 用户列表更新
    socket.on('userListUpdate', (users) => {
      document.getElementById('user-list').innerHTML = 
        `<h4>在线用户 (${users.length})</h4>` + 
        users.map(u => `<div>${u.nickname}</div>`).join('');
    });
    // 连接状态管理
    socket.on('connect', () => {
      console.log('已连接服务器');
      socket.emit('joinRoom', 'public');
    });
    socket.on('disconnect', () => {
      console.warn('连接已断开');
    });
    // 回车发送
    document.getElementById('messageInput').addEventListener('keypress', (e) => {
      if (e.key === 'Enter') sendMessage();
    });
  </script>
</body>
</html>

二、核心功能说明

  1. 连接配置

    • 自动生成用户 ID 并存储于 localStorage

    • 优先使用 WebSocket 协议,失败后自动重连

  2. 消息交互

    • 支持文本消息发送与格式化时间显示

    • 消息气泡区分自己/他人(CSS 样式控制)

  3. 状态管理

    • 实时更新在线用户列表

    • 自动加入默认公共聊天室 public


三、服务端需配合实现

虽然此示例为纯前端代码,但需服务端支持以下逻辑:

  1. 处理 joinRoom 事件管理房间

  2. 广播 chatMessage 到同一房间用户

  3. 维护用户连接状态并推送 userListUpdate


四、扩展建议

  1. 历史记录
    添加 localStorage 缓存最近的 100 条消息

  2. 文件传输
    通过 socket.emit('fileUpload', base64Data) 实现(需服务端支持)

  3. 心跳检测
    增加 setInterval 发送心跳包维持连接


标签: 分享IT知识

相关文章

职场人如何写季度总结

作为职场人,写季度总结是一个展示自己工作成果和总结经验教训的机会。以下是一些撰写季度总结的建议:明确总结的目的:季度总结的目的是为了向上级领导汇报本季度的工作进展、成果和教训,以及下季度的工作计划。因...

技术与艺术的融合:创造无比魅力的结合

在人类文明的发展史上,技术与艺术如同一对形影不离的伙伴,共同推动了人类社会的进步。随着科技的飞速发展,技术与艺术的融合愈发紧密,为我们揭示了一个全新的视角,让我们重新审视这两股强大的力量。在当今数字化...

享受工作:找到事业与生活的平衡点

工作是我们日常生活中不可或缺的一部分。我们花费大量的时间和精力在工作中,因此,如何享受工作并找到事业与生活的平衡点就显得尤为重要。在这篇文章中,我们将探讨如何享受工作,让事业和生活愉快并行。首先,了解...

湖边

湖边,一片静谧的美好。清晨的阳光洒在湖面上,波光粼粼,让人心旷神怡。湖上的荷叶轻轻摇曳,荷花争奇斗艳,仿佛在向人们展示着它们的美丽。湖边的柳树依依,芦苇丛生,形成了一道道天然的屏障,让人感到一种隐秘的...

如何高效学习

努力和技巧的能力。以下是一些可以帮助你高效学习的方法:制定学习计划:制定一个清晰的学习计划,包括学习内容和时间表,有助于你更好地组织自己的学习并提高学习效率。创造良好的学习环境:在学习时,尽可能避免干...

如何写文章

过程,需要一定的技巧和准备。以下是一些写文章的步骤和技巧:确定文章的主题和目的:在开始写作之前,您需要明确文章的主题和目的。这有助于您确定文章的重点和方向。研究和收集信息:在开始写作之前,进行一些研究...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。