文本聊天已完成

2025-06-26 15:41:29 +08:00
parent 9f0ef4cc26
commit 16e028e50e
14 changed files with 574 additions and 450 deletions
--- a/app/Http/Controllers/AuthController.php
+++ b/app/Http/Controllers/AuthController.php
@@ -39,9 +39,10 @@ class AuthController extends Controller
        $username = request()->input('username');
        $password = request()->input('password');
        $nickName = request()->input('nickname');
+        $avatar = request()->input('avatar');

        return jok(
-            $this->service->register($username, $password, $nickName),
+            $this->service->register($username, $password, $nickName, $avatar),
            '注册成功'
        );
    }
--- a/app/Http/Controllers/ImController.php
+++ b/app/Http/Controllers/ImController.php
@@ -36,15 +36,25 @@ class ImController extends Controller
    {
        $messageType = request()->post('message_type');
        $data = request()->post('data');
+        $toUserId = request()->post('to_user_id');
+        $chatRoomId = request()->post('chat_room_id');
+        $replayId = request()->post('replay_id', 0);
+
        try {
-            return jok($this->service->sendMessage($data, $messageType));
+            return jok($this->service->sendMessage($data, $toUserId, $chatRoomId, $replayId, $messageType));
+        } catch (\Exception $e) {
+            return jerr($e->getMessage());
+        }
+    }
+
+    public function getMessageByChatRoomId()
+    {
+        $chatRoomId = request()->input('chat_room_id');
+        try {
+            return jok(
+                $this->service->getMessageByChatRoomId($chatRoomId)
+            );
        } catch (\Exception $e) {
-            ds([
-                'message' => $e->getMessage(),
-                'file' => $e->getFile(),
-                'line' => $e->getLine(),
-                'trace' => $e->getTrace(),
-            ]);
            return jerr($e->getMessage());
        }
    }
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -2,9 +2,25 @@

 namespace App\Http\Controllers;

+use App\Services\GatewayWorker\UserService;
 use Illuminate\Http\Request;

 class UserController extends Controller
 {
    //
+    /**
+     * 获取用户列表
+     * @Method GET
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function userList()
+    {
+        try {
+            return jok(
+                (new UserService())->userList()
+            );
+        } catch (\Exception $e) {
+            return jerr($e->getMessage());
+        }
+    }
 }
--- a/app/Models/MessageModel.php
+++ b/app/Models/MessageModel.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class MessageModel extends Model
+{
+    //
+    protected $table = 'nl_messages';
+    protected $primaryKey = 'id';
+    public $timestamps = false;
+    protected $guarded = [];
+
+    public function user()
+    {
+        return $this->hasOne(UserModel::class, 'id', 'user_id');
+    }
+    public function toUser()
+    {
+        return $this->hasOne(UserModel::class, 'id', 'to_user_id');
+    }
+}
--- a/app/Models/im/ChatRoomModel.php
+++ b/app/Models/im/ChatRoomModel.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Models\im;
+
+use Illuminate\Database\Eloquent\Model;
+
+class ChatRoomModel extends Model
+{
+    //
+    protected $table = 'nl_chat_room';
+    protected $primaryKey = 'id';
+    public $timestamps = false;
+    protected $guarded = [];
+}
--- a/app/Models/im/ChatRoomUserModel.php
+++ b/app/Models/im/ChatRoomUserModel.php
@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Models\im;
+
+use Illuminate\Database\Eloquent\Model;
+
+class ChatRoomUserModel extends Model
+{
+    //
+    protected $table = 'nl_chat_room_user';
+    protected $primaryKey = 'id';
+    public $timestamps = false;
+    protected $guarded = [];
+}
--- a/app/Services/Base/BaseService.php
+++ b/app/Services/Base/BaseService.php
@@ -17,7 +17,7 @@ class BaseService
    public function __construct()
    {
        $token = request()->header('token');
-        $this->userId = $token;
+        $this->userId = (int)$token;
        $this->userInfo = UserModel::where('id', $token)->first();
    }

--- a/app/Services/GatewayWorker/GatewayClientService.php
+++ b/app/Services/GatewayWorker/GatewayClientService.php
@@ -122,4 +122,10 @@ class GatewayClientService
            Gateway::sendToAll($message);
        }
    }
+
+    // 判断uid是否在线
+    public function isUidOnline(int $uid): bool
+    {
+        return Gateway::isUidOnline($uid);
+    }
 }
--- a/app/Services/GatewayWorker/ImService.php
+++ b/app/Services/GatewayWorker/ImService.php
@@ -3,6 +3,8 @@
 namespace App\Services\GatewayWorker;

 use App\Enum\MessageTypeEnum;
+use App\Models\im\ChatRoomUserModel;
+use App\Models\MessageModel;
 use App\Services\Base\BaseService;
 use GatewayClient\Gateway;

@@ -26,7 +28,36 @@ class ImService extends BaseService
        return ['绑定成功'];
    }

-    public function sendMessage($data, $type = MessageTypeEnum::Text->value)
+    public function getMessageByChatRoomId($chatRoomId)
+    {
+        $message = MessageModel::with([
+            'user',
+            'toUser'
+        ])->where('chat_room_id', $chatRoomId)->get();
+
+        if (empty($message)) {
+            return [];
+        }
+        $result = [];
+        $message = $message->toArray();
+        foreach ($message as $v) {
+            $result[] = [
+                'userId' => $v['user_id'],
+                'l' => $v['user_id'] === $this->userId? 'user' : 'to_user',
+                'message_type' => MessageTypeEnum::from($v['type'])->description(),
+                'content' => $v['content'],
+                'nick_name' => $v['user']['nick_name'],
+                'avatar' => $v['user']['avatar'],
+                'timestamp' => $v['created_at'],
+                'type' => $v['user_id'] === $this->userId? 'sent' : 'received',
+                'user' => $v['user'],
+                'to_user' => $v['to_user'],
+            ];
+        }
+        return $result;
+    }
+
+    public function sendMessage($data, $toUserId, $chatRoomId, $replayId, $type = MessageTypeEnum::Text->value)
    {
 //        $uids = [1,2,3];
 //        $uidsC = [];
@@ -36,12 +67,22 @@ class ImService extends BaseService
 //        ds($uidsC);
        $data['message_type'] = MessageTypeEnum::from($type)->description();
        $this->gatewayClient->sendToUser(
-            $this->userId === 1? 2: 1,
+            $toUserId,
            $this->userId,
            $data['avatarColor'],
            $this->userInfo['nick_name'],
-            '单聊'. $data['content'],
+            $data['content'],
        );
+
+        MessageModel::create([
+            'user_id' => $this->userId,
+            'chat_room_id' => $chatRoomId,
+            'to_user_id' => $toUserId,
+            'replay_id' => $replayId,
+            'type' => $type,
+            'content' => $data['content'],
+            'created_at' => time(),
+        ]);
 //        $this->gatewayClient->broadcastMessage(
 //            $this->userId,
 //            $data['avatarColor'],
--- a/app/Services/GatewayWorker/UserService.php
+++ b/app/Services/GatewayWorker/UserService.php
@@ -2,9 +2,11 @@

 namespace App\Services\GatewayWorker;

+use App\Models\im\ChatRoomUserModel;
 use App\Models\UserModel;
+use App\Services\Base\BaseService;

-class UserService
+class UserService extends BaseService
 {
    public function login($username, $password)
    {
@@ -23,10 +25,11 @@ class UserService
        }
    }

-    public function register($username, $password, $nickName)
+    public function register($username, $password, $nickName, $avatar)
    {
        $userModel = UserModel::create([
            'username' => $username,
+            '$avatar' => $$avatar,
            'password' => md5($password),
            'nick_name' => $nickName,
            'created_at' => time()
@@ -37,4 +40,23 @@ class UserService
            'user_info' => $userModel
        ];
    }
+
+    public function userList()
+    {
+        $userModel = UserModel::where('id', '<>', $this->userId)->get();
+        if (empty($userModel)) {
+            return [];
+        }
+
+        $myRooms = ChatRoomUserModel::where('user_id', $this->userId)->pluck('chat_room_id');
+        $allRooms = ChatRoomUserModel::where('user_id', '<>', $this->userId)->whereIn('chat_room_id', $myRooms)->get();
+        $roomsMap = array_column($allRooms->toArray(), 'chat_room_id', 'user_id');
+        $userModel = $userModel->toArray();
+        $gatewayClient = GatewayClientService::getInstance()->init();
+        foreach ($userModel as &$v) {
+            $v['is_uid_online'] = $gatewayClient->isUidOnline($v['id']);
+            $v['chat_room_id'] = !empty($roomsMap[$v['id']])? $roomsMap[$v['id']] : 0;
+        }
+        return $userModel;
+    }
 }
--- a/config/gateway.php
+++ b/config/gateway.php
@@ -7,7 +7,8 @@ return [
 //    'register_address' => 'http://t-ws.奶酪yun.cn/register/'
 //    'register_address' => 't-ws.奶酪yun.cn/register/',
 //    'register_address' => '10.0.12.17:11238',
-    'register_address' => '127.0.0.1:11238',
+    'register_address' => env('GATEWAYWORKER_REGISTER_HOST'),
+    'ws_address' => env('WEBSOCKET_HOST'),
 //    'register_address' => '101.43.12.11:11238',
 //    'register_address' => '172.22.240.1:11238',
 ];
--- a/resources/views/chat.blade.php
+++ b/resources/views/chat.blade.php
@@ -6,6 +6,9 @@
    <title>奶酪云聊天室</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.5/axios.min.js"></script>
+    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
+    <!-- 添加 Vue.js CDN -->
+    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js"></script>
    <style>
        :root {
            --bg-dark: #121212;
@@ -62,6 +65,10 @@
            background: var(--success);
        }

+        .status-indicator.disconnected {
+            background: var(--error);
+        }
+
        #chat-container {
            height: 100vh;
            display: flex;
@@ -155,6 +162,10 @@
            background: rgba(255, 255, 255, 0.05);
        }

+        .user-item.me {
+            background: rgba(255, 255, 255, 0.05);
+        }
+
        .user-item.active {
            background: rgba(106, 85, 250, 0.15);
            border-left: 3px solid var(--accent);
@@ -455,63 +466,117 @@
    </style>
 </head>
 <body>
-<!-- 连接状态提示 -->
-<div class="connection-status">
-    <div class="status-indicator" id="status-indicator"></div>
-    <span id="status-text">未连接</span>
-</div>
-
-<!-- 聊天主界面 -->
-<div id="chat-container">
-    <div class="chat-header">
-        <div class="chat-title">
-            <div class="user-avatar" id="user-avatar">U</div>
-            <h2 id="current-username">奶酪云聊天室</h2>
-        </div>
-        <button id="logout-btn">退出登录</button>
+<div id="app">
+    <!-- 连接状态提示 -->
+    <div class="connection-status">
+        <div class="status-indicator" :class="connectionStatus"></div>
+        <span id="status-text">@{{ statusText }}：@{{ selectUsers.nick_name }}</span>
    </div>

-    <div class="chat-content">
-        <div class="user-list">
-            <div class="section-title">在线用户 <span id="online-count">(0)</span></div>
-            <div id="user-list-container">
-                <!-- 用户列表将通过JS动态生成 -->
+    <!-- 聊天主界面 -->
+    <div id="chat-container">
+        <div class="chat-header">
+            <div class="chat-title">
+                <div class="user-avatar" id="user-avatar" :style="{ background: currentUser.avatarColor }">
+                    @{{ currentUser.name.charAt(0).toUpperCase() }}
+                </div>
+                <h2 id="current-username">@{{ currentUser.name }} 的接诊室</h2>
            </div>
+            <button id="logout-btn" @click="handleLogout">退出登录</button>
        </div>

-        <div class="chat-area">
-            <div class="messages-container" id="messages-container">
-                <div class="no-messages">
-                    <i class="fas fa-comment-alt"></i>
-                    <p>开始聊天吧！您发送的消息将在这里显示</p>
+        <div class="chat-content">
+            <div class="user-list">
+                <div class="section-title">用户列表 <span id="online-count">(@{{ users.length }})</span></div>
+                <div id="user-list-container">
+                    <!-- 当前用户显示在顶部 -->
+                    <div class="user-item me">
+                        <div class="user-avatar" :style="{ background: currentUser.avatarColor }">
+                            @{{ currentUser.name.charAt(0).toUpperCase() }}
+                        </div>
+                        <div class="user-name">@{{ currentUser.name }} (我)</div>
+                        <div class="status-indicator connected"></div>
+                    </div>
+
+                    <!-- 其他用户列表 -->
+                    <div class="user-item"
+                         v-for="user in users"
+                         :key="user.id"
+                         v-if="user.id != currentUser.id"
+                         @click="selectUser(user)"
+                         :class="{
+                            active: selectUsers.id === user.id
+                         }"
+                    >
+                        <div class="user-avatar" :style="{ background: user.avatar || '#6a55fa' }">
+                            @{{ user.nick_name.charAt(0).toUpperCase() }}
+                        </div>
+                        <div class="user-name">@{{ user.nick_name }}</div>
+                        <div class="status-indicator" :class="{ connected: user.is_uid_online === true }"></div>
+                    </div>
                </div>
            </div>

-            <div class="message-input-area">
-                <!-- 工具栏 -->
-                <div class="input-toolbar">
-                    <div class="toolbar-btn" id="image-btn">
-                        <i class="fas fa-image"></i>
+            <div class="chat-area">
+                <div class="messages-container" id="messages-container">
+                    <div class="no-messages" v-if="messages.length === 0">
+                        <i class="fas fa-comment-alt"></i>
+                        <p>开始聊天吧！您发送的消息将在这里显示</p>
                    </div>
-                    <div class="toolbar-btn" id="voice-btn">
-                        <i class="fas fa-microphone"></i>
+
+                    <!-- 系统消息 -->
+                    <div class="system-message" v-for="msg in systemMessages" :key="msg.timestamp">
+                        @{{ msg.content }}
                    </div>
-                    <div class="toolbar-btn" id="attach-btn">
-                        <i class="fas fa-paperclip"></i>
+
+                    <!-- 聊天消息 -->
+                    <div class="message-container" :class="msg.type" v-for="msg in messages" :key="msg.timestamp">
+                        <div class="message-avatar" :style="{ background: msg.avatarColor }">
+                            @{{ msg.name.charAt(0).toUpperCase() }}
+                        </div>
+                        <div class="message-body">
+                            <div class="message-name">@{{ msg.name }}</div>
+                            <div class="message-bubble">
+                                <div class="message-content">@{{ msg.text }}</div>
+                            </div>
+                            <div class="message-info">
+                                <span class="timestamp">@{{ formatTime(msg.timestamp) }}</span>
+                            </div>
+                        </div>
                    </div>
                </div>

-                <div class="input-container">
-                    <textarea id="message-input" placeholder="输入消息..." autocomplete="off"></textarea>
-                    <div class="input-actions">
-                        <div class="emoji-btn" id="emoji-btn">
-                            <i class="far fa-smile"></i>
+                <div class="message-input-area">
+                    <!-- 工具栏 -->
+                    <div class="input-toolbar">
+                        <div class="toolbar-btn" id="image-btn" @click="showImageUpload">
+                            <i class="fas fa-image"></i>
+                        </div>
+                        <div class="toolbar-btn" id="voice-btn" :class="{ recording: isRecording }" @click="toggleVoiceRecording">
+                            <i :class="isRecording ? 'fas fa-square' : 'fas fa-microphone'"></i>
+                        </div>
+                        <div class="toolbar-btn" id="attach-btn" @click="showAttachmentUpload">
+                            <i class="fas fa-paperclip"></i>
+                        </div>
+                    </div>
+
+                    <div class="input-container">
+                        <textarea id="message-input" v-model="messageInput" placeholder="输入消息..."
+                                  autocomplete="off" @keydown.enter.exact.prevent="sendChatMessage"></textarea>
+                        <div class="input-actions">
+                            <div class="emoji-btn" id="emoji-btn" @click="toggleEmojiPicker">
+                                <i class="far fa-smile"></i>
+                            </div>
+                            <button id="send-btn" @click="sendChatMessage">发送</button>
+                        </div>
+                    </div>
+
+                    <!-- Emoji选择器 -->
+                    <div class="emoji-picker" :class="{ show: showEmojiPicker }" id="emoji-picker">
+                        <div class="emoji-item" v-for="(emoji, index) in emojis" :key="index" @click="addEmoji(emoji)">
+                            @{{ emoji }}
                        </div>
-                        <button id="send-btn">发送</button>
                    </div>
-                </div>
-                <div class="emoji-picker" id="emoji-picker">
-                    <!-- Emoji将通过JS动态加载 -->
                </div>
            </div>
        </div>
@@ -519,100 +584,141 @@
 </div>

 <script>
-    // 当前用户信息
-    let currentUser = {
-        id: '',
-        name: ''
-    };
+    // 常见的emoji
+    const EMOJIS = [
+        '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
+        '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
+        '😘', '😗', '😋', '😛', '😜', '🤪', '😝', '🤑',
+        '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑',
+        '😶', '😏', '😒', '🙄', '😬', '🤥', '😲', '😮',
+        '😦', '😧', '😳', '😵', '😖', '😫', '😩', '🥺',
+        '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳',
+        '🥵', '🥶', '😨', '😰', '😥', '😓', '🤗', '🤔',
+        '🫣', '🤭', '🤫', '🫢', '🫠', '😶‍🌫️', '😐', '😑',
+        '🙈', '🙉', '🙊', '❤️', '💛', '💚', '💙', '💜',
+        '💔', '💋', '💯', '💢', '💥', '💫', '💦', '💨',
+        '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙',
+        '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '👐',
+        '🤲', '🤝', '🙏', '💪', '🦾', '🦿', '🦵', '🦶'
+    ];

-    // 获取用户信息
-    const storedUser = sessionStorage.getItem('currentUser');
-    if (!storedUser) {
-        // 如果没有登录信息，重定向到登录页面
-        window.location.href = '/login';
-    } else {
-        const userData = JSON.parse(storedUser);
-        currentUser.id = userData.username;
-        currentUser.name = userData.name;
+    // 头像颜色
+    const AVATAR_COLORS = [
+        '#6a55fa', '#f87171', '#4ade80', '#fbbf24',
+        '#60a5fa', '#c084fc', '#fb923c', '#34d399'
+    ];

-        // 为用户生成头像颜色
-        const avatarColors = [
-            '#6a55fa', '#f87171', '#4ade80', '#fbbf24',
-            '#60a5fa', '#c084fc', '#fb923c', '#34d399'
-        ];
-        const colorIndex = Math.floor(Math.random() * avatarColors.length);
-        currentUser.avatarColor = avatarColors[colorIndex];
-
-        // 更新用户UI
-        document.getElementById('user-avatar').textContent = currentUser.name.charAt(0).toUpperCase();
-        document.getElementById('user-avatar').style.background = currentUser.avatarColor;
-        document.getElementById('current-username').textContent = `${currentUser.name} 的聊天`;
-    }
-
-    // WebSocket连接
-    let socket = null;
-    const serverUrl = "ws://t-ws.nailaoyun.cn/ws/";
-    // const serverUrl = "ws://127.0.0.1:8282";
-
-    // DOM元素引用
-    const statusIndicator = document.getElementById('status-indicator');
-    const statusText = document.getElementById('status-text');
-    const messagesContainer = document.getElementById('messages-container');
-    const messageInput = document.getElementById('message-input');
-    const sendBtn = document.getElementById('send-btn');
-    const logoutBtn = document.getElementById('logout-btn');
-    const userListContainer = document.getElementById('user-list-container');
-    const onlineCount = document.getElementById('online-count');
-    const emojiBtn = document.getElementById('emoji-btn');
-    const emojiPicker = document.getElementById('emoji-picker');
-    const imageBtn = document.getElementById('image-btn');
-    const voiceBtn = document.getElementById('voice-btn');
-    const attachBtn = document.getElementById('attach-btn');
-
-    // 连接WebSocket
-    function connectWebSocket() {
-        updateStatus('连接中...', 'connecting');
-
-        socket = new WebSocket(serverUrl);
-
-        socket.onopen = () => {
-            updateStatus('已连接', 'connected');
-
-            // 发送登录信息
-            socket.send(JSON.stringify({
-                type: 'login',
-                userId: currentUser.id,
-                userName: currentUser.name,
-                avatarColor: currentUser.avatarColor
-            }));
-        };
-
-        socket.onmessage = (event) => {
-            try {
-                const message = JSON.parse(event.data);
-                handleIncomingMessage(message);
-            } catch (e) {
-                console.error('消息解析错误:', e);
+    new Vue({
+        el: '#app',
+        data: {
+            currentUser: {
+                id: '',
+                name: '',
+                username: '',
+                avatarColor: ''
+            },
+            selectUsers: [],
+            users: [],
+            messages: [],
+            systemMessages: [],
+            messageInput: '',
+            token: '',
+            showEmojiPicker: false,
+            emojis: EMOJIS,
+            isRecording: false,
+            socket: null,
+            statusText: '未连接',
+            connectionStatus: '',
+            serverUrl: "{{ config('gateway.ws_address') }}"
+        },
+        created() {
+            this.token = sessionStorage.getItem('token');
+            this.initializeUser();
+            this.connectWebSocket();
+            let selectUserLocalStorage = localStorage.getItem('selectUser')
+            if (selectUserLocalStorage) {
+                this.selectUser(JSON.parse(selectUserLocalStorage))
            }
-        };
+        },
+        methods: {
+            initializeUser() {
+                const storedUser = sessionStorage.getItem('currentUser');
+                if (!storedUser) {
+                    window.location.href = '/login';
+                    return;
+                }

-        socket.onerror = (error) => {
-            console.error('WebSocket错误:', error);
-            updateStatus('连接出错', 'error');
-        };
+                const userData = JSON.parse(storedUser);
+                this.currentUser.id = userData.id;
+                this.currentUser.username = userData.username;
+                this.currentUser.name = userData.name;

-        socket.onclose = () => {
-            updateStatus('连接已关闭', 'disconnected');
-        };
-    }
+                // 为用户生成头像颜色
+                // const colorIndex = Math.floor(Math.random() * AVATAR_COLORS.length);
+                // this.currentUser.avatarColor = AVATAR_COLORS[colorIndex];
+                this.currentUser.avatarColor = userData.avatarColor;
+            },
+            connectWebSocket() {
+                this.updateStatus('连接中...', 'connecting');

-    // 处理接收到的消息
-    function handleIncomingMessage(message) {
-        switch(message.type) {
-            case 'system':
-                addSystemMessage(message.content);
-                break;
-            case 'login_success':
+                this.socket = new WebSocket(this.serverUrl);
+
+                this.socket.onopen = () => {
+                    this.updateStatus('已连接', 'connected');
+
+                    // 发送登录信息
+                    this.socket.send(JSON.stringify({
+                        type: 'login',
+                        userId: this.currentUser.id,
+                        userName: this.currentUser.name,
+                        avatarColor: this.currentUser.avatarColor
+                    }));
+                };
+
+                this.socket.onmessage = (event) => {
+                    try {
+                        const message = JSON.parse(event.data);
+                        this.handleIncomingMessage(message);
+                    } catch (e) {
+                        console.error('消息解析错误:', e);
+                    }
+                };
+
+                this.socket.onerror = (error) => {
+                    console.error('WebSocket错误:', error);
+                    this.updateStatus('连接出错', 'error');
+                };
+
+                this.socket.onclose = () => {
+                    this.updateStatus('连接已关闭', 'disconnected');
+                };
+            },
+            handleIncomingMessage(message) {
+                switch(message.type) {
+                    case 'system':
+                        this.addSystemMessage(message.content);
+                        break;
+                    case 'login_success':
+                        this.handleLoginSuccess(message);
+                        break;
+                    case 'chat':
+                        this.addMessage({
+                            userId: message.userId,
+                            name: message.userName,
+                            avatarColor: message.avatarColor,
+                            text: message.content,
+                            timestamp: new Date(message.timestamp),
+                            type: message.userId === this.currentUser.id ? 'sent' : 'received'
+                        });
+                        break;
+                    case 'user_list':
+                        this.updateUserList(message.users);
+                        break;
+                    default:
+                        console.log('未知消息类型:', message);
+                }
+            },
+            handleLoginSuccess(message) {
                let token = sessionStorage.getItem('token');
                axios.post('/api/b', {
                    client_id: message.client_id,
@@ -622,320 +728,179 @@
                }).catch(error => {
                    console.error('请求出错:', error);
                });
-                addSystemMessage(message.content);
-                break;
+                this.addSystemMessage(message.content);
+            },
+            sendChatMessage() {
+                const text = this.messageInput.trim();
+                if (!text) return;

-            case 'chat':
-                addMessage({
-                    userId: message.userId,
-                    name: message.userName,
-                    avatarColor: message.avatarColor,
-                    text: message.content,
-                    timestamp: new Date(message.timestamp),
-                    type: message.userId === currentUser.id ? 'sent' : 'received'
-                });
-                break;
+                const message = {
+                    type: 'chat',
+                    userId: this.currentUser.id,
+                    userName: this.currentUser.name,
+                    avatarColor: this.currentUser.avatarColor,
+                    content: text,
+                    timestamp: Date.now()
+                };

-            case 'user_list':
-                updateUserList(message.users);
-                break;
+                let token = sessionStorage.getItem('token');

-            default:
-                console.log('未知消息类型:', message);
-        }
-    }
-
-    // 发送聊天消息
-    function sendChatMessage() {
-        const text = messageInput.value.trim();
-        if (!text) return;
-
-        const message = {
-            type: 'chat',
-            userId: currentUser.id,
-            userName: currentUser.name,
-            avatarColor: currentUser.avatarColor,
-            content: text,
-            timestamp: Date.now()
-        };
-
-        let token = sessionStorage.getItem('token');
-
-        if (socket && socket.readyState === WebSocket.OPEN) {
-            axios.post('/api/im/send-message', {
-                message_type: 0,
-                data: message
-            }, {
-                headers: {
-                    'token': `${token}`,  // 假设使用 Bearer token
-                    'Content-Type': 'application/json'  // 通常也需要指定内容类型
+                if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+                    axios.post('/api/im/send-message', {
+                        message_type: 0,
+                        data: message,
+                        to_user_id: this.selectUsers.id,
+                        chat_room_id: this.selectUsers.chat_room_id
+                    }, {
+                        headers: {
+                            'token': `${token}`,
+                            'Content-Type': 'application/json'
+                        }
+                    })
+                        .then(response => {
+                            console.log('请求成功:', response.data);
+                            let res = response.data;
+                            if (res.code === 0) {
+                                // 添加消息到UI（自己的消息）
+                                this.addMessage({
+                                    userId: this.currentUser.id,
+                                    name: this.currentUser.name,
+                                    avatarColor: this.currentUser.avatarColor,
+                                    text: text,
+                                    timestamp: new Date(),
+                                    type: 'sent'
+                                });
+                                // 清空输入框
+                                this.messageInput = '';
+                            }
+                        })
+                        .catch(error => {
+                            console.error('请求出错:', error);
+                        });
                }
-            })
-            .then(response => {
-                console.log('请求成功:', response.data);
-                let res = response.data;
-                if (res.code === 0) {
-                    // 添加消息到UI（自己的消息）
-                    addMessage({
-                        userId: currentUser.id,
-                        name: currentUser.name,
-                        avatarColor: currentUser.avatarColor,
-                        text: text,
-                        timestamp: new Date(),
-                        type: 'sent'
+            },
+            updateStatus(text, status) {
+                this.statusText = text;
+                this.connectionStatus = status === 'connected' ? 'connected' : '';
+            },
+            addSystemMessage(text) {
+                // this.messages.push({
+                //     content: text,
+                //     timestamp: new Date()
+                // });
+                // this.scrollToBottom();
+            },
+            addMessage(msg) {
+                this.messages.push(msg);
+                this.scrollToBottom();
+            },
+            updateUserList(users) {
+                console.log('更新用户列表:', users);
+                let token = sessionStorage.getItem('token');
+                axios.get('/api/user/user-list', {
+                    headers: {
+                        'token': `${token}`,
+                        'Content-Type': 'application/json'
+                    }
+                })
+                    .then(response => {
+                        console.log('请求成功:', response.data);
+                        let res = response.data;
+                        if (res.code === 0) {
+                            this.users = res.result;
+                        }
+                    })
+                    .catch(error => {
+                        console.error('请求出错:', error);
                    });
-                    // 清空输入框
-                    messageInput.value = '';
-
-                    // 重新聚焦输入框
-                    messageInput.focus();
+            },
+            formatTime(date) {
+                if (!(date instanceof Date)) {
+                    date = new Date(date);
+                }
+                const hours = date.getHours().toString().padStart(2, '0');
+                const minutes = date.getMinutes().toString().padStart(2, '0');
+                return `${hours}:${minutes}`;
+            },
+            scrollToBottom() {
+                this.$nextTick(() => {
+                    const container = document.getElementById('messages-container');
+                    container.scrollTop = container.scrollHeight;
+                });
+            },
+            handleLogout() {
+                if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+                    this.socket.close();
                }
-            })
-            .catch(error => {
-                console.error('请求出错:', error);
-            });
-            // socket.send(JSON.stringify(message));
-            //
-            // // 添加消息到UI（自己的消息）
-            // addMessage({
-            //     userId: currentUser.id,
-            //     name: currentUser.name,
-            //     avatarColor: currentUser.avatarColor,
-            //     text: text,
-            //     timestamp: new Date(),
-            //     type: 'sent'
-            // });
-            //
-            // // 清空输入框
-            // messageInput.value = '';
-            //
-            // // 重新聚焦输入框
-            // messageInput.focus();
-        }
-    }

-    // 更新连接状态
-    function updateStatus(text, status) {
-        statusText.textContent = text;
+                sessionStorage.removeItem('currentUser');
+                window.location.href = '/login';
+            },
+            toggleVoiceRecording() {
+                if (!this.isRecording) {
+                    // 开始录制
+                    this.isRecording = true;
+                    document.getElementById('voice-btn').style.backgroundColor = 'rgba(248, 113, 113, 0.2)';

-        statusIndicator.className = 'status-indicator';
-        switch(status) {
-            case 'connecting':
-                statusIndicator.style.backgroundColor = 'var(--warning)';
-                break;
-            case 'connected':
-                statusIndicator.classList.add('connected');
-                break;
-            case 'error':
-            case 'disconnected':
-                statusIndicator.style.backgroundColor = 'var(--error)';
-                break;
-        }
-    }
-
-    // 添加系统消息
-    function addSystemMessage(text) {
-        const noMessages = messagesContainer.querySelector('.no-messages');
-        if (noMessages) noMessages.remove();
-
-        const systemMessage = document.createElement('div');
-        systemMessage.className = 'system-message';
-        systemMessage.textContent = text;
-        messagesContainer.appendChild(systemMessage);
-        scrollToBottom();
-    }
-
-    // 添加聊天消息到UI（优化后的结构）
-    function addMessage(msg) {
-        const noMessages = messagesContainer.querySelector('.no-messages');
-        if (noMessages) noMessages.remove();
-
-        const messageContainer = document.createElement('div');
-        messageContainer.className = `message-container ${msg.type}`;
-
-        // 格式化时间
-        const hours = msg.timestamp.getHours().toString().padStart(2, '0');
-        const minutes = msg.timestamp.getMinutes().toString().padStart(2, '0');
-        const timeString = `${hours}:${minutes}`;
-
-        messageContainer.innerHTML = `
-                <div class="message-avatar" style="background: ${msg.avatarColor}">${msg.name.charAt(0).toUpperCase()}</div>
-                <div class="message-body">
-                    <div class="message-name">${msg.name}</div>
-                    <div class="message-bubble">
-                        <div class="message-content">${escapeHtml(msg.text)}</div>
-                    </div>
-                    <div class="message-info">
-                        <span class="timestamp">${timeString}</span>
-                    </div>
-                </div>
-            `;
-
-        messagesContainer.appendChild(messageContainer);
-        scrollToBottom();
-    }
-
-    // 更新用户列表
-    function updateUserList(users) {
-        userListContainer.innerHTML = '';
-        onlineCount.textContent = `(${users.length})`;
-
-        if (users.length === 0) {
-            userListContainer.innerHTML = '<div class="no-users">暂无在线用户</div>';
-            return;
-        }
-
-        // 当前用户显示在顶部
-        const currentUserItem = document.createElement('div');
-        currentUserItem.className = 'user-item active';
-        currentUserItem.innerHTML = `
-                    <div class="user-avatar" style="background: ${currentUser.avatarColor}">${currentUser.name.charAt(0).toUpperCase()}</div>
-                    <div class="user-name">${currentUser.name} (我)</div>
-                    <div class="status-indicator connected"></div>
-                `;
-        userListContainer.appendChild(currentUserItem);
-
-        // 添加其他用户
-        users.filter(user => user.id != currentUser.id).forEach(user => {
-            const avatarColor = user.avatarColor || '#6a55fa';
-
-            const userItem = document.createElement('div');
-            userItem.className = 'user-item';
-            userItem.innerHTML = `
-                        <div class="user-avatar" style="background: ${avatarColor}">${user.name.charAt(0).toUpperCase()}</div>
-                        <div class="user-name">${user.name}</div>
-                        <div class="status-indicator connected"></div>
-                    `;
-            userListContainer.appendChild(userItem);
-        });
-    }
-
-    // 初始化Emoji选择器
-    function initEmojiPicker() {
-        // 常见的emoji
-        const emojis = [
-            '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
-            '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
-            '😘', '😗', '😋', '😛', '😜', '🤪', '😝', '🤑',
-            '🤗', '🤭', '🤫', '🤔', '🤐', '🤨', '😐', '😑',
-            '😶', '😏', '😒', '🙄', '😬', '🤥', '😲', '😮',
-            '😦', '😧', '😳', '😵', '😖', '😫', '😩', '🥺',
-            '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳',
-            '🥵', '🥶', '😨', '😰', '😥', '😓', '🤗', '🤔',
-            '🫣', '🤭', '🤫', '🫢', '🫠', '😶‍🌫️', '😐', '😑',
-            '🙈', '🙉', '🙊', '❤️', '💛', '💚', '💙', '💜',
-            '💔', '💋', '💯', '💢', '💥', '💫', '💦', '💨',
-            '👍', '👎', '👌', '✌️', '🤞', '🤟', '🤘', '🤙',
-            '👋', '🤚', '🖐️', '✋', '🖖', '👏', '🙌', '👐',
-            '🤲', '🤝', '🙏', '💪', '🦾', '🦿', '🦵', '🦶'
-        ];
-
-        emojiPicker.innerHTML = '';
-        emojis.forEach(emoji => {
-            const emojiItem = document.createElement('div');
-            emojiItem.className = 'emoji-item';
-            emojiItem.textContent = emoji;
-            emojiItem.addEventListener('click', () => {
-                messageInput.value += emoji;
-                emojiPicker.classList.remove('show');
-            });
-            emojiPicker.appendChild(emojiItem);
-        });
-    }
-
-    // 辅助函数：HTML转义
-    function escapeHtml(text) {
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-
-    // 滚动到底部
-    function scrollToBottom() {
-        messagesContainer.scrollTop = messagesContainer.scrollHeight;
-    }
-
-    // 退出登录
-    function handleLogout() {
-        if (socket && socket.readyState === WebSocket.OPEN) {
-            socket.close();
-        }
-
-        sessionStorage.removeItem('currentUser');
-        window.location.href = '/login';
-    }
-
-    // 语音录制功能
-    function handleVoiceRecording() {
-        if (!voiceBtn.classList.contains('recording')) {
-            // 开始录制
-            voiceBtn.classList.add('recording');
-            voiceBtn.innerHTML = '<i class="fas fa-square"></i>';
-            document.getElementById('voice-btn').style.backgroundColor = 'rgba(248, 113, 113, 0.2)';
-
-            // 这里应该添加实际录制逻辑
-            setTimeout(() => {
-                // 模拟完成录制
-                handleVoiceRecordingEnd();
-            }, 3000);
-        }
-    }
-
-    function handleVoiceRecordingEnd() {
-        voiceBtn.classList.remove('recording');
-        voiceBtn.innerHTML = '<i class="fas fa-microphone"></i>';
-        document.getElementById('voice-btn').style.backgroundColor = '';
-    }
-
-    // 事件监听
-    document.addEventListener('DOMContentLoaded', () => {
-        // 初始化
-        initEmojiPicker();
-
-        // 连接WebSocket
-        connectWebSocket();
-
-        // 发送消息
-        sendBtn.addEventListener('click', sendChatMessage);
-
-        // Enter发送消息，Shift+Enter换行
-        messageInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault();
-                sendChatMessage();
+                    // 模拟3秒后停止录制
+                    setTimeout(() => {
+                        this.isRecording = false;
+                        document.getElementById('voice-btn').style.backgroundColor = '';
+                    }, 3000);
+                } else {
+                    // 停止录制
+                    this.isRecording = false;
+                    document.getElementById('voice-btn').style.backgroundColor = '';
+                }
+            },
+            toggleEmojiPicker() {
+                this.showEmojiPicker = !this.showEmojiPicker;
+            },
+            addEmoji(emoji) {
+                this.messageInput += emoji;
+                this.showEmojiPicker = false;
+            },
+            selectUser(user) {
+                localStorage.setItem('selectUser', JSON.stringify(user));
+                console.log('Selected user:', user);
+                // 这里可以添加选择用户后的逻辑
+                this.selectUsers = user;
+                this.messages = [];
+                axios.get('/api/im/get-message-by-chat-room-id', {
+                    params: {
+                        chat_room_id: user.chat_room_id
+                    },
+                    headers: {
+                        'token': `${this.token}`,
+                        'Content-Type': 'application/json'
+                    }
+                })
+                    .then(response => {
+                        console.log('请求成功:', response.data);
+                        let res = response.data;
+                        let result =  res.result;
+                        if (res.code === 0) {
+                            result.forEach(item => {
+                                this.addMessage({
+                                    userId: item.userId,
+                                    name: item.nick_name,
+                                    avatarColor: item.avatar,
+                                    text: item.content,
+                                    // timestamp: new Date(item.timestamp),
+                                    timestamp: item.timestamp,
+                                    type: item.type
+                                });
+                            });
+                        }
+                    })
+            },
+            showImageUpload() {
+                this.addSystemMessage("图片上传功能（实际应用中需要实现上传功能）");
+            },
+            showAttachmentUpload() {
+                this.addSystemMessage("附件上传功能（实际应用中需要实现上传功能）");
            }
-        });
-
-        // Emoji选择器
-        emojiBtn.addEventListener('click', (e) => {
-            emojiPicker.classList.toggle('show');
-            e.stopPropagation();
-        });
-
-        // 点击页面其他地方关闭emoji选择器
-        document.addEventListener('click', (e) => {
-            if (emojiPicker.classList.contains('show') && !emojiPicker.contains(e.target) && !emojiBtn.contains(e.target)) {
-                emojiPicker.classList.remove('show');
-            }
-        });
-
-        // 退出登录
-        logoutBtn.addEventListener('click', handleLogout);
-
-        // 图片按钮功能
-        imageBtn.addEventListener('click', () => {
-            const message = "图片上传功能（实际应用中需要实现上传功能）";
-            addSystemMessage(message);
-        });
-
-        // 语音按钮功能
-        voiceBtn.addEventListener('click', handleVoiceRecording);
-
-        // 附件按钮功能
-        attachBtn.addEventListener('click', () => {
-            const message = "附件上传功能（实际应用中需要实现上传功能）";
-            addSystemMessage(message);
-        });
+        }
    });
 </script>
 </body>
--- a/resources/views/login.blade.php
+++ b/resources/views/login.blade.php
@@ -529,6 +529,12 @@
        }, 3000);
    }

+    // 头像颜色
+    const AVATAR_COLORS = [
+        '#6a55fa', '#f87171', '#4ade80', '#fbbf24',
+        '#60a5fa', '#c084fc', '#fb923c', '#34d399'
+    ];
+
    // 用户登录
    loginForm.addEventListener('submit', function(e) {
        e.preventDefault();
@@ -551,6 +557,7 @@
                id: res.result.user_info.id,
                username: res.result.user_info.username,
                name: res.result.user_info.nick_name,
+                avatarColor: res.result.user_info.avatar,
                loginTime: new Date().toISOString()
            }));
            sessionStorage.setItem('token', res.result.token);
@@ -594,9 +601,12 @@
            return;
        }

+        const colorIndex = Math.floor(Math.random() * AVATAR_COLORS.length);
+        let avatarColor = AVATAR_COLORS[colorIndex];
        axios.post('/api/auth/register', {
            username,
            password,
+            avatar: avatarColor,
            nickname: registerNickname
        }).then(response => {
            console.log(response);
--- a/routes/api.php
+++ b/routes/api.php
@@ -14,6 +14,7 @@ Route::group([
 ], function () {
    cc_auto_route_register([
        'im' => \App\Http\Controllers\ImController::class,
+        'user' => \App\Http\Controllers\UserController::class,
    ]);
 });