edu_train_web_new/exe/new_src/WebSocket/js/main.js

/*eslint-disable*/

import { MyWebSocket } from "./common/MyWebSocket.js";

/**
 * 主程序
 */
export class Main {

    // 每次 new 出对象则会调用这个构造函数
    constructor() {
        
        // 记录当前要私聊的cid
        this.objUserCid = null;
        // websocket 的端口号，可以在调用接口后更新
        this.protWebSocket = 3000;

    }

    // 实现单例模式
    static find() {
        if (!Main.instance) {
            Main.instance = new Main();
        }
        return Main.instance;
    }
    
    /**
     * 视图
     */
    view = function() {

        let thisClass = this;

        // 更新websocket的端口号
        MyWebSocket.find().prot = thisClass.protWebSocket;

        let thisTime = new Date().getTime();
        document.getElementById("nickname").value = "自定义昵称_" + thisTime;
        document.getElementById("nickname").onchange = function(e) {

            // console.log(
            //     "nickname", this.value
            // );
            
            /**
             * 更新自己当前用户的数据字段，
             * 更新后，同时会自动通知自己
             * 所在房间的所有用户，更新了哪些字段数据
             */
            MyWebSocket.find().commonSend(
                "upUser",
                /**
                 * 更新的字段数据，如果字段不存在，则会再服务器里自动追加对应的字段数据
                 * 如果存在，则是更新
                 */
                {
                    "name" : this.value,
                }
            );

        }
        
        document.getElementById("socketStart").onclick = function() {
            
            MyWebSocket.find().nickname = document.getElementById("nickname").value;
            
            // 这里的 userId 后面如果你想要跟数据库的id对应才填写，否则这里会自动生成一个唯一的userId
            // MyWebSocket.find().userId = null;

            MyWebSocket.find().webSocketInit();

            // 房间里发送变化触发回调
            MyWebSocket.find().roomUpdateCallback = function(
                // 类型
                type,
                // 某个用户退出，或者加入的时候，该用户的相关数据
                cidJson,
                // 某个用户更新了具体哪些字段,后续例如同步用户昵称，坐标等数据使用
                dbUpdate
            ) {

                console.log(
                    "roomUpdateCallback", type, cidJson, dbUpdate
                );

                if (typeof type == "string") {

                    switch (type) {
                        // 有用户退出
                        case "roomUserExit":
                            thisClass.roomUserExitEvent(cidJson);
                            break;

                        // 有用户加入
                        case "roomUserJoin":
                            thisClass.roomUserJoinEvent(cidJson);
                            break;

                        // 用户数据发送了变化
                        case "roomUserDbUpdate":
                            thisClass.roomUserDbUpdateEvent(cidJson, dbUpdate);
                            break;
                    }

                }
                
                // // 更新当前房间号的列表数据
                // console.log("更新当前房间号的列表数据", MyWebSocket.find().roomList);
                thisClass.rightUserListEvent();

            }

            // 每次房间里有群发消息的时候回调
            MyWebSocket.find().roomChatAllCallback = function(
                // 用户的 json数据
                cidJson,
                // 消息的内容
                message
            ) {

                // console.log(
                //     "MyWebSocket.find().roomChatAllCallback",
                //     cidJson, message
                // );

                thisClass.roomChatAllCallbackEvent(cidJson, message);

            }

            /**
             * 每次有其他用户单独发送消息给你回调
             */
            MyWebSocket.find().cidSendCallback = function(
                // 发起消息用户的json数据
                sendCidJson,
                // 接收消息用户的json数据
                getCidJson,
                // 消息内容
                message
            ) {
                thisClass.cidSendCallbackEvent(sendCidJson, getCidJson, message);
            }
            
        }

        document.getElementById("joinRoom").onclick = function() {

            var room = document.getElementById("room").value;
            MyWebSocket.find().joinRoom(room);

        }


        document.getElementById("subSend").onclick = function() {

            var objTxtSend = document.getElementById("txtSend");
            var sendTxt = objTxtSend.value;

            if (sendTxt == null || sendTxt == undefined) {
                return;
            }

            // console.log(
            //     "发送消息的内容", sendTxt
            // );

            if (thisClass.objUserCid != null && thisClass.objUserCid != undefined) {

                // 给指定的用户发送消息
                MyWebSocket.find().cidSend("chat", thisClass.objUserCid, sendTxt);

            } else {
                // 房间里群聊
                MyWebSocket.find().roomSend("chatAll", sendTxt);
            }
            
            objTxtSend.value = "";

        }

        document.getElementById("objUserExit").onclick = function() {
            
            thisClass.objUserCid = null;
            document.getElementById("objUserCid").innerHTML = "";
            // 重新更新UI
            thisClass.rightUserListEvent();

        }

    }

    /**
     * 更新当前的用户列表
     */
    rightUserListEvent = function() {

        // console.log("更新当前房间号的列表数据 rightUserListEvent", MyWebSocket.find().roomList);

        let thisClass = this;

        var html = "";

        for (var i = 0; i < MyWebSocket.find().roomList.length; i++) {

            var thisRoomList = MyWebSocket.find().roomList[i];
            // console.log(
            //     "thisRoomList", thisRoomList
            // );

            var name = thisRoomList["name"];
            var cid = thisRoomList["cid"];
            var userId = thisRoomList["userId"];
            var roomId = thisRoomList["roomId"];

            let classNew = "select ";

            if (thisClass.objUserCid == cid) {
                classNew += "selectYes ";
            }

            var addHtml = '<div class="' + classNew + '" cid="'
            + cid +'" userId="'
            + userId +'" roomId="'
            + roomId + '" >'
            + name
            +'</div>';

            html += addHtml;

        }

        document.getElementById("rightUserList").innerHTML = html;

        $("#rightUserList").find(".select").click(function(e) {
            
            var obj = $(this);
            var cid = obj.attr("cid");
            var userId = obj.attr("userId");
            var roomId = obj.attr("roomId");

            console.log("userObj", cid, userId, roomId);

            thisClass.objUserCid = cid;
            document.getElementById("objUserCid").innerHTML = thisClass.objUserCid;

            // 重新更新UI，让被选中的 cid 目标有样式
            thisClass.rightUserListEvent();

        });

        return thisClass;
        
    }

    /**
     * 房间有用户加入
     * cidJson          该用户的相关数据
     */
    roomUserJoinEvent = function(cidJson) {

        let thisClass = this;

        // console.log(
        //     "房间有用户加入 roomUserJoinEvent", cidJson
        // );

        let name = cidJson.name;
        let userId = cidJson.userId;

        /**
         * 如果加入房间的是自己用户，说明是自己第一次进入房间
         * 后续开发，这里就需要特殊进行处理，自己第一次登陆
         * 则要根据房间里所有用户的数据，同步，例如游戏中玩家的坐标，穿着等各种数据参数
         */
        if (userId == MyWebSocket.find().userId) {
            name = "自己";
        }

        let objDiv = document.createElement("div");
        objDiv.className = "chat";

        let addHtml = '';
        addHtml += '<p class="chatTitle chatSys">' + name + '</p>';
        addHtml += '<p class="chatTxt chatSys">用户-进入-房间</p>';

        objDiv.innerHTML = addHtml;
        document.getElementById('chatList').appendChild(objDiv);
        thisClass.chatListEvent();

    }

    /**
     * 房间有用户退出
     * cidJson          该用户的相关数据
     */
    roomUserExitEvent = function(cidJson) {

        let thisClass = this;

        // console.log(
        //     "房间有用户退出 roomUserExitEvent", cidJson
        // );

        let name = cidJson.name;
        let userId = cidJson.userId;

        /**
         * 如果是自己退出，后续可能会有些单独处理的逻辑
         */
        if (userId == MyWebSocket.find().userId) {
            name = "自己";
        }

        let objDiv = document.createElement("div");
        objDiv.className = "chat";

        let addHtml = '';
        addHtml += '<p class="chatTitle chatSys">' + name + '</p>';
        addHtml += '<p class="chatTxt chatSys">用户-退出-房间</p>';

        objDiv.innerHTML = addHtml;
        document.getElementById('chatList').appendChild(objDiv);
        thisClass.chatListEvent();
        
    }

    /**
     * 当前房间里的某个用户数据发生了变化
     * cidJson          该用户的相关数据
     * dbUpdate         具体变化了哪些数据
     */
    roomUserDbUpdateEvent = function(cidJson, dbUpdate) {

        let thisClass = this;

        let name = cidJson.name;
        let userId = cidJson.userId;

        /**
         * 如果是自己退出，后续可能会有些单独处理的逻辑
         */
        if (userId == MyWebSocket.find().userId) {
            console.log("自己在房间里更新了数据", dbUpdate);
        }

        console.log(
            "当前房间里的某个用户数据发生了变化 roomUserDbUpdateEvent",
            cidJson, dbUpdate
        );
        

    }

    /**
     * 每次房间里有群发消息的时候回调
     * cidJson          该用户的相关数据
     * message          消息的内容
     */
    roomChatAllCallbackEvent = function(cidJson, message) {

        let thisClass = this;

        // console.log(
        //     "roomChatAllCallbackEvent", cidJson, message
        // );

        let name = cidJson.name;
        let userId = cidJson.userId;
        let jsonMessage = message.message;

        if (typeof jsonMessage["type"] != 'string') {
            return thisClass;
        }

        let jsonMessageType = jsonMessage.type;

        // console.log(
        //     "roomChatAllCallbackEvent", jsonMessageType, jsonMessage
        // );

        // 这里根据自定义不同类型，来判断触发不同逻辑
        switch (jsonMessageType) {

            // 群发聊天消息
            case "chatAll":

                let content = jsonMessage.content;

                /**
                 * 如果是自己退出，后续可能会有些单独处理的逻辑
                 */
                if (userId == MyWebSocket.find().userId) {
                    name = "自己";
                }

                let objDiv = document.createElement("div");
                objDiv.className = "chat";

                let addHtml = '';
                addHtml += '<p class="chatTitle">' + name + '</p>';
                addHtml += '<p class="chatTxt">' + content + '</p>';

                objDiv.innerHTML = addHtml;
                document.getElementById('chatList').appendChild(objDiv);
                thisClass.chatListEvent();

                break;

            // // 
            // case "":
                
            //     break;

            // // 
            // case "":
                
            //     break;

            // // 
            // case "":
                
            //     break;

        }
        
        return thisClass;

    }

    /**
     * 每次有其他用户单独发送消息给你回调
     * sendCidJson      发起消息用户的json数据
     * getCidJson       接收消息用户的json数据
     * message          消息内容
     */
    cidSendCallbackEvent = function(sendCidJson, getCidJson, message) {

        let thisClass = this;

        // console.log(
        //     "cidSendCallbackEvent", sendCidJson, getCidJson, message
        // );

        let sendCidJsonName = sendCidJson["name"];
        /**
         * 如果是自己退出，后续可能会有些单独处理的逻辑
         */
        if (sendCidJson["userId"] == MyWebSocket.find().userId) {
            sendCidJsonName = "自己";
        }
        
        let getCidJsonName = getCidJson["name"];
        /**
         * 如果是自己退出，后续可能会有些单独处理的逻辑
         */
        if (getCidJson["userId"] == MyWebSocket.find().userId) {
            getCidJsonName = "自己";
        }


        let type = message["type"];
        let content = message["content"];

         // 这里根据自定义不同类型，来判断触发不同逻辑
        switch (type) {

            // 处理私聊聊天内容
            case "chat":

                let objDiv = document.createElement("div");
                objDiv.className = "chat";

                let addHtml = '';
                addHtml += '<p class="chatTitle chatObj">' + sendCidJsonName + ' 给 ' + getCidJsonName + ' 发送的私聊消息' + '</p>';
                addHtml += '<p class="chatTxt chatObj">' + content + '</p>';

                objDiv.innerHTML = addHtml;
                document.getElementById('chatList').appendChild(objDiv);
                thisClass.chatListEvent();

                break;

            // // 
            // case "":
                
            //     break;

            // // 
            // case "":
                
            //     break;

            // // 
            // case "":
                
            //     break;

        }


        return thisClass;

    }

    // 滚动条滚动到最底部
    chatListEvent = function() {
        // 滚动条滚动到最底部
        document.getElementById("chatList").scrollTop = document.getElementById("chatList").scrollHeight;
    }

    

}