update

exe/new_src/WebSocket/css/main.css

@@ -1,156 +0,0 @@
-* {
-    padding: 0px;
-    margin: 0px;
-    box-sizing:border-box;
-    -moz-box-sizing:border-box; /* Firefox */
-    -webkit-box-sizing:border-box; /* Safari */
-}
-
-html, body {
-    width: 100%;
-    height: 100%;
-    /* 解决移动端点击闪烁问题 */
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-img {
-    /*去除中间腰部间隙*/
-    vertical-align:middle;
-    /*去除顶部间隙*/
-    vertical-align:bottom;
-    /*去除中间顶部间隙*/
-    vertical-align:top;
-    /*注意该方法在对img控件使用的时候,使用 float 和 font-size 解决左右间隙问题
-    会导致img在div中无法居中,此时可以在img控件外设置新的一个div来设置居中进行实现居中
-    所以 float 和 font-size 一般特意指定几个目标范围内img控件解决左右间隙问题 例如.abc img{}
-    意思就是 设置了 class="abc" 里面所有的img控件执行样式
-    */
-    /*进行浮动解决左右两侧出现间隙 与 font-size: 0px; 一起配合 */
-    /*float: left;*/
-    /*这个也设置解决系统自带空白间隙问题 与 float: left; 一起配合*/
-    /*font-size: 0px;*/
-}
-
-.app {
-
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    top: 0px;
-    left: 0px;
-    overflow-x: scroll;
-    overflow-y: scroll;
-
-}
-
-.common {
-    width: 100%;
-    height: auto;
-    padding: 3px;
-}
-
-.content {
-    width: 100%;
-    height: 300px;
-    background-color: rgb(233, 233, 233);
-    position: relative;
-}
-
-.leftTitle {
-    position: absolute;
-    top: 1%;
-    left: 1%;
-    height: 6%;
-    right: 38%;
-    background-color: #ffffff;
-}
-
-.leftTxt {
-    position: absolute;
-    top: 8%;
-    left: 1%;
-    bottom: 1%;
-    right: 38%;
-    background-color: #ffffff;
-    overflow-y: scroll;
-    /* 文本换行 */
-    text-wrap: normal;
-    word-break: break-all;
-    /* white-space: pre-wrap; */
-
-}
-
-.rightTitle {
-    position: absolute;
-    top: 1%;
-    left: 63%;
-    height: 6%;
-    right: 1%;
-    background-color: #ffffff;
-}
-
-
-.rightUser {
-    position: absolute;
-    top: 8%;
-    left: 63%;
-    bottom: 1%;
-    right: 1%;
-    background-color: #ffffff;
-
-    -moz-user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    -khtml-user-select: none;
-    user-select: none;
-
-    overflow-y: scroll;
-
-}
-
-.select {
-    /* 文本换行 */
-    text-wrap: normal;
-    word-break: break-all;
-    padding: 5px;
-    border: 1px solid #00aeff;
-    margin: 1px;
-    /* 手势 */
-    cursor : pointer;
-    background-color: #ffffff;
-    color: #000000;
-}
-
-.selectYes {
-    background-color: #00aeff;
-    color: #ffffff;
-}
-
-.submitEdit {
-    width: 100%;
-    padding: 3px;
-}
-
-.chat {
-    width: 100%;
-    height: auto;
-    padding: 5px;
-}
-
-.chatTitle {
-    font-size: 14px;
-    color: darkgreen;
-}
-
-.chatTxt {
-    font-size: 14px;
-    color: rgb(128, 128, 128);
-}
-
-.chatSys {
-    color: #636363;
-}
-
-.chatObj {
-    color: #017771;
-}

exe/new_src/WebSocket/js/common/MyWebSocket.js

@@ -1,806 +0,0 @@
-/*eslint-disable*/
-
-/**
- * 用于处理websocket实时通讯使用
- */
-export class MyWebSocket {
-
-    // 每次 new 出对象则会调用这个构造函数
-    constructor() {
-        
-        // 端口号
-        this.prot = 3000;
-        // new出webSocket通讯对象
-        this.objWebSocket = null;
-
-        // webSocket 服务端ip
-        this.ip = "127.0.0.1";
-        // 如果是平时开发后，发布到服务器，域名访问，那么就用这个
-        // this.ip = document.domain;
-
-        // 用于触发重连的计时器
-        this.webSocketRestConnectTime = null;
-
-        // 记录当前进入的房间号
-        this.room = null;
-        // 记录当前自己的socketId值
-        this.socketId = null;
-
-        /**
-         * 记录当前的userId，用户登陆后
-         * 就会固定唯一的 userId, 之后就不会在改变
-         * 这里的userId 可以是数据库的，没有数据库的
-         * 可以用第一次登陆的 socketId 作为记录
-         * 
-         * 用于后续统一通讯告诉大家例如角色，还是别的数据使用
-         * 不会因为后续每次断开重连，导致 socketId 的变化
-         * 而要重置已经存在在别的地方的渲染数据使用
-         */
-        this.userId = null;
-
-        /**
-         * 记录当前用户自己本身的参数
-         */
-        this.myConfig = null;
-
-        // 昵称
-        this.nickname = null;
-
-        // 记录最后一次进入的房间号，用于后续触发重连的逻辑
-        this.roomId = null;
-        // 当断开连接，重置false，后面触发重连进入房间逻辑
-        this.joinRoomBool = false;
-
-        /**
-         * 记录当前房间号的用户列表 json 结构
-         * 每当用户进入，或者退出，该参数优先更新逻辑
-         */
-        this.roomListJson = {
-            // "唯一cid" : "对应json数据",
-        };
-
-        /**
-         * 记录当前房间号的用户列表
-         * 对应 cid 的数据记录在 this.roomListJson
-         */
-        this.roomList = [];
-
-        /**
-         * 每当房间里发送变化的时候触发回调
-         * 
-         * type         类型
-         *              roomUserExit        有用户退出
-         *              roomUserJoin        有用户加入
-         *              roomUserDbUpdate    用户数据发送了变化
-         * 
-         * cidJson      加入或者退出的用户的 json数据
-         * dbUpdate     当 type 是 roomUserDbUpdate 的时候，才有的参数回调，具体变化的字段数据
-         * 
-         */
-        this.roomUpdateCallback = null;
-
-        /**
-         * 每次房间里有群发消息的时候回调
-         * cidJson  用户的 json数据
-         * message  消息的内容
-         */
-        this.roomChatAllCallback = null;
-
-        /**
-         * 每次有其他用户单独发送消息给你回调
-         * sendCidJson          发起消息用户的json数据
-         * getCidJson           接收消息用户的json数据
-         * message              消息内容
-         */
-        this.cidSendCallback = null;
-
-    }
-
-    // 实现单例模式
-    static find() {
-        if (!MyWebSocket.instance) {
-            MyWebSocket.instance = new MyWebSocket();
-        }
-        return MyWebSocket.instance;
-    }
-    
-
-    /**
-     * webSocket 初始化连接
-     * */
-    webSocketInit = function() {
-
-        let thisClass = this;
-
-        // 只有是空的时候
-        if (thisClass.objWebSocket == null || thisClass.objWebSocket == 'undefined') {
-
-            var webSocketUrl = "ws://" + this.ip + ":" + this.prot;
-            // 连接 webSocket
-            thisClass.objWebSocket = new WebSocket(webSocketUrl);
-            thisClass.webSocketEvent();
-
-        }
-
-    }
-
-    /**
-     * 断开后，自动触发重新连接通讯逻辑
-     */
-    webSocketRestConnect = function() {
-        let thisClass = this;
-
-        if (thisClass.webSocketRestConnectTime != null && thisClass.webSocketRestConnectTime != 'undefined') {
-            return this;
-        }
-
-        if (thisClass.objWebSocket != null && thisClass.objWebSocket != 'undefined') {
-            return this;
-        }
-
-        thisClass.joinRoomBool = false;
-        thisClass.webSocketRestConnectTime = setInterval(function() {
-
-            clearInterval(thisClass.webSocketRestConnectTime);
-            thisClass.webSocketRestConnectTime = null;
-            thisClass.webSocketInit();
-
-        }, 1000);
-
-    }
-
-    /**
-     * 连接成功后，调用该方法，设置 objWebSocket 的事件
-     * */
-    webSocketEvent = function() {
-
-        let thisClass = this;
-
-        /**
-         * 实例对象的 onopen 属性
-         * 当WebSocket客户端与服务器建立连接并完成握手后会回调此函数。
-         * 参数 evt 就是 数据的返回
-         * */
-        thisClass.objWebSocket.onopen = function(evt) {
-            console.log([ "连接成功", evt ]);
-        }
-
-        /**
-         * 实例对象的 onmessage 属性
-         * 当服务器收到来自客户端的数据帧时会回调此函数。
-         * 参数 evt 就是 数据的返回
-         * */
-        thisClass.objWebSocket.onmessage = function(evt) {
-            // console.log("onmessage 回调数据");
-            // console.log(evt);
-            // console.log(evt.data);
-            thisClass.commonMessage(evt.data);
-        }
-
-        /**
-         * 实例对象的 onclose 属性
-         * 目标客户端id 退出关闭的时候，会触发该事件
-         * 服务端关闭也会触发该事件
-         * 参数 evt 就是 数据的返回
-         * */
-        thisClass.objWebSocket.onclose = function(evt) {
-
-            // console.log("onclose 回调数据");
-            // console.log(evt);
-            // 此时将目标对象重置为null，方便后续重新连接
-            thisClass.objWebSocket = null;
-            thisClass.webSocketRestConnect();
-
-        }
-
-        /**
-         * 报错的时候执行这里，例如连接失败
-         * */
-        thisClass.objWebSocket.onerror = function(evt, e) {
-
-            // console.log("onerror 回调数据");
-            // console.log(evt);
-            // // console.log(evt.data);
-            // 此时将目标对象重置为null，方便后续重新连接
-            thisClass.objWebSocket = null;
-            thisClass.webSocketRestConnect();
-            
-        }
-
-    }
-    
-    /**
-     * 统一处理接收到的消息
-     * serverData       接收服务端的消息
-     */
-    commonMessage = function(serverData) {
-
-        let thisClass = this;
-
-        let json = {};
-        try {
-            json = JSON.parse(serverData);
-        } catch(e) {
-            return thisClass;
-        }
-
-        // console.log("commonMessage", json);
-        
-        // 当前是哪个cid发来的消息
-        let cid = json["cid"];
-        let data = json["data"];
-        let dataType = data["type"];
-
-        console.log("commonMessage", json, dataType, data);
-
-        if (typeof dataType == "string") {
-            
-            switch (dataType) {
-
-                // 心跳包的ping，用于验证用户是否还在正常连接，没有回复pong，则服务端强制退出
-                case "ping":
-                    thisClass.commonSend("pong", "");
-                    break;
-                // 第一次连接通讯后，服务端发来的消息
-                case "login":
-                    thisClass.loginEvent(json);
-                    break;
-                // 每次用户自己在服务器成功更新了哪些字段数据，则得到对应更新的字段数据
-                case "myDbUpdate":
-                    thisClass.myDbUpdateEvent(json);
-
-                    // 如果自己已经加入过房间号，则自动再触发进入房间逻辑，实现重连后进入房间的逻辑
-                    if (
-                        thisClass.roomId != null && thisClass.roomId != undefined
-                        && thisClass.joinRoomBool == false
-                    ) {
-                        thisClass.joinRoom(room);
-                    }
-
-                    break;
-
-                // 当房间里有新用户进入的时候,给当前房间号的所有用户发送消息
-                case "roomUserJoin":
-                    thisClass.roomUserJoinEvent(json);
-                    break;
-
-                // 当房间里有用户退出离开的时候的时候,给当前房间号的所有用户发送消息
-                case "roomUserExit":
-                    thisClass.roomUserExitEvent(json);
-                    break;
-
-                // 当房间里某个用户更新了数据字段的时候
-                case "roomUserDbUpdate":
-                    thisClass.roomUserDbUpdateEvent(json);
-                    break;
-
-                // 当前房间接收到聊天群发的消息
-                case "roomChatAll":
-                    thisClass.roomChatAllEvent(json);
-                    break;
-
-                // 给指定用户私聊
-                case "cidSend":
-                    thisClass.cidSendEvent(json);
-                    break;
-
-            }
-
-        }
-        
-        return thisClass;
-
-    }
-    
-    /**
-     * 统一发送消息给服务端格式
-     * 服务端会根据接收不同的类型，执行操作，例如更新用户数据，或者是群发消息，或者是进入房间，或者是给指定的用户单独发送消息等逻辑触发
-     * 
-     * type                 类型，不同的类型，会触发的逻辑不一样
-     *      upUser          更新当前用户的参数，例如昵称，或者坐标点
-     *      joinRoom        用户进入房间或者切换到另外一个房间
-     *      roomSendAll     房间里群发消息,房间里所有用户可以接收到消息，是一个通用的传输数据
-     *                      这里只做实时通讯消息发送，具体最后前端进行逻辑处理
-     *      cidSend         给指定用户私聊
-     * 
-     * message      给服务端发送的消息，可以是字符串，也可以是json结构
-     * 
-     * * */
-    commonSend = function(type, message) {
-
-        let thisClass = this;
-
-        if (thisClass.objWebSocket == null || thisClass.objWebSocket == undefined) {
-            return thisClass;
-        }
-
-        // 设置发送消息的时间戳，精确到毫秒
-        let thisTime = new Date().getTime();
-
-        // 消息传输统一格式，格式不正确则无法正常通讯
-        var submitJson = {
-            "type" : type,
-            "message" : message,
-            // // 客户端发送时间
-            // "sendTime" : new Date().Format("yyyy-MM-dd hh:mm:ss"),
-            "thisTime" : thisTime,
-        };
-
-        thisClass.objWebSocket.send(JSON.stringify(submitJson));
-
-        return thisClass;
-    }
-
-    /**
-     * 处理当前用户第一次登陆的时候的逻辑
-     * json         接收服务端的参数
-     */
-    loginEvent = function(json) {
-
-        let thisClass = this;
-
-        // 当前是哪个cid发来的消息
-        let cid = json["cid"];
-        let data = json["data"];
-        
-        let dataMessage = data["message"];
-        let dataMessageUserDb = dataMessage["userDb"];
-        let dataMessageUserDbCid = dataMessageUserDb["cid"];
-        
-        thisClass.socketId = dataMessageUserDbCid;
-        if (thisClass.userId == null || thisClass.userId == undefined) {
-            thisClass.userId = dataMessageUserDbCid;
-        }
-
-        thisClass.myConfig = dataMessageUserDb;
-
-        // console.log(
-        //     thisClass.socketId,
-        //     thisClass.myConfig,
-        //     thisClass.userId
-        // );
-
-        thisClass.loginUserUpdate();
-        
-        return thisClass;
-
-    }
-
-    /**
-     * 登陆后，先更新初始的用户数据
-     */
-    loginUserUpdate = function() {
-
-        let thisClass = this;
-        
-        thisClass.commonSend(
-            "upUser",
-            {
-                "name" : thisClass.nickname,
-                "userId" : thisClass.userId,
-            }
-        );
-
-        return thisClass;
-
-    }
-
-    /**
-     * 每次用户自己在服务器成功更新了哪些字段数据，则得到对应更新的字段数据
-     * json
-     */
-    myDbUpdateEvent = function(json) {
-
-        let thisClass = this;
-
-        // 当前是哪个cid发来的消息
-        let cid = json["cid"];
-        let data = json["data"];
-        
-        let dataMessage = data["message"];
-        let updateJson = dataMessage["updateJson"];
-        
-        // 更新的字段数据
-        for (let key in updateJson) {
-            let val = updateJson[key];
-            thisClass.myConfig[key] = val;
-        }
-        
-        return thisClass;
-
-    }
-    
-    /**
-     * 进入房间
-     * room     房间号
-     */
-    joinRoom = function(room) {
-        
-        let thisClass = this;
-
-        if (thisClass.userId == null && thisClass.userId == undefined) {
-            console.log("连接通讯后请先更新 userId 字段才可进入房间");
-            return;
-        }
-        
-        var submitJson = {
-            "roomId" : room,
-        };
-
-        thisClass.roomId = room;
-
-        thisClass.commonSend(
-            "joinRoom",
-            submitJson
-        );
-
-        thisClass.joinRoomBool = true;
-
-        return thisClass;
-
-    }
-
-
-    /**
-     * 当房间里有新用户进入的时候,给当前房间号的所有用户发送消息
-     * json
-     */
-    roomUserJoinEvent = function(json) {
-
-        let thisClass = this;
-        
-        // 当前是哪个cid发来的消息
-        let cid = json["cid"];
-        let data = json["data"];
-        
-        let dataMessage = data["message"];
-        
-        // 此时是该cid进入房间
-        let sendCid = dataMessage["sendCid"];
-        // 得到当前房间列表的所有用户信息
-        let roomList = dataMessage["message"];
-
-        // 加入用户的数据
-        let joinUser = null;
-
-        // 循环更新对应房间数据
-        for (let i = 0; i < roomList.length; i++) {
-
-            let objRoomList = roomList[i];
-            let objRoomListCid = objRoomList["cid"];
-
-            // 此时说明是该用户加入的房间
-            if (objRoomListCid == sendCid) {
-                // console.log("用户加入房间", objRoomList);
-                joinUser = objRoomList;
-            }
-            
-            thisClass.roomListJson[objRoomListCid] = objRoomList;
-
-        }
-
-        // 更新房间列表用户数据
-        thisClass.roomList = roomList;
-
-        if (thisClass.roomUpdateCallback != null && thisClass.roomUpdateCallback != undefined) {
-            thisClass.roomUpdateCallback("roomUserJoin", joinUser, null);
-        }
-        
-        return thisClass;
-
-    }
-
-    /**
-     * 当房间里有用户退出离开的时候的时候,给当前房间号的所有用户发送消息
-     * json
-     */
-    roomUserExitEvent = function(json) {
-
-        let thisClass = this;
-
-        // 当前是哪个cid发来的消息
-        let cid = json["cid"];
-        let data = json["data"];
-        
-        let dataMessage = data["message"];
-
-        // 此时是该cid退出房间
-        let sendCid = dataMessage["sendCid"];
-        // 得到当前房间列表的所有用户信息
-        let roomList = dataMessage["message"];
-
-        // 循环更新对应房间数据
-        for (let i = 0; i < roomList.length; i++) {
-
-            let objRoomList = roomList[i];
-            let objRoomListCid = objRoomList["cid"];
-            thisClass.roomListJson[objRoomListCid] = objRoomList;
-
-        }
-
-        // 更新房间列表用户数据
-        thisClass.roomList = roomList;
-        
-        // 退出的用户数据
-        let userExit = null;
-
-        // 找到哪个用户退出
-        if (thisClass.roomListJson[sendCid] != null && thisClass.roomListJson[sendCid] != undefined) {
-
-            // 这里进行一个转换，让它变成独立的对象
-            userExit = JSON.parse(JSON.stringify(thisClass.roomListJson[sendCid]));
-            // console.log("用户退出房间", userExit);
-
-            // 退出用户的数据清除
-            thisClass.roomListJson[sendCid] = null;
-            delete thisClass.roomListJson[sendCid];
-
-        }
-
-        if (thisClass.roomUpdateCallback != null && thisClass.roomUpdateCallback != undefined) {
-            thisClass.roomUpdateCallback("roomUserExit", userExit, null);
-        }
-        
-        return thisClass;
-
-    }
-
-
-    /**
-     * 当房间里某个用户更新了数据字段的时候
-     * json
-     */
-    roomUserDbUpdateEvent = function(json) {
-
-        let thisClass = this;
-
-        // 当前是哪个cid发来的消息
-        let cid = json["cid"];
-        let data = json["data"];
-
-        let dataMessage = data["message"];
-
-        // 此时是该cid更新的字段数据
-        let sendCid = dataMessage["sendCid"];
-        // 更新了哪些字段数据
-        let dbUpdate = dataMessage["message"];
-
-        console.log(
-            "当房间里某个用户更新了数据字段的时候 roomUserDbUpdateEvent ",
-            // json,
-            sendCid,
-            dbUpdate,
-            // this.roomListJson,
-            // this.roomList
-        );
-        
-        let dbUpdateUserId = null;
-        // 如果更新的字段带有 userId
-        if (dbUpdate["userId"] != null && dbUpdate["userId"] != null) {
-            dbUpdateUserId = dbUpdate["userId"];
-        }
-
-        // 找到被更新的用户数据
-        let updateUser = null;
-
-        // 循环房间的所有数据
-        for (let i = 0; i < this.roomList.length; i++) {
-
-            let objRoomList = this.roomList[i];
-            let objRoomListCid = objRoomList["cid"];
-            let objRoomListUserId = objRoomList["userId"];
-
-            // console.log(
-            //     "roomUserDbUpdateEvent objRoomList ===》", objRoomList
-            // );
-
-            // 是否找到
-            let objBool = false;
-
-            // 优先以 userId 进行寻找对象
-            if (
-                dbUpdateUserId != null && dbUpdateUserId != undefined
-                && dbUpdateUserId == objRoomListUserId
-            ) {
-                objBool = true;
-            } else if (objRoomListCid == sendCid) {
-                objBool = true;
-            }
-
-            if (objBool == true) {
-
-                // console.log(
-                //     "roomUserDbUpdateEvent objBool ===》", objRoomList
-                // );
-
-                // 开始更新对应的字段数据
-                for (var key in dbUpdate) {
-                    objRoomList[key] = dbUpdate[key];
-                }
-
-                // 更新指定目标cid的用户相关数据
-                if (this.roomListJson[objRoomListCid] != null && this.roomListJson[objRoomListCid] != undefined) {
-                    // 开始更新对应的字段数据
-                    for (var key in dbUpdate) {
-                        this.roomListJson[objRoomListCid][key] = dbUpdate[key];
-                    }
-                }
-
-                updateUser = objRoomList;
-
-            }
-            
-        }
-
-
-        // console.log(
-        //     "roomUserDbUpdateEvent ===》", this.roomListJson, this.roomList
-        // );
-
-        if (thisClass.roomUpdateCallback != null && thisClass.roomUpdateCallback != undefined) {
-            thisClass.roomUpdateCallback("roomUserDbUpdate", updateUser, dbUpdate);
-        }
-        
-        return thisClass;
-
-    }
-
-
-    /**
-     * 给当前自己所在房间号发送消息
-     * type         自定义类型，该类型你定义的是什么，在返回的房间里，就会返回什么类型
-     *              如果你是通知所有房间群发聊天填写  chatAll
-     *              否则你填写别的类型，然后再根据这个类型，单独处理逻辑
-     * 
-     * message      给服务端发送的消息，可以是字符串，也可以是json结构
-     *              该参数后续根据 type 参数，来配合开发新的逻辑
-     *              例如我填写 type = chatAll , 该参数就传字符串聊天的内容
-     *              如果传别的类型，可以传json结构，然后通过该接收的消息，进行特殊处理别的逻辑
-     */
-    roomSend = function(type, message) {
-
-        let thisClass = this;
-
-        if (this.myConfig == null || this.myConfig == undefined) {
-            return thisClass;
-        }
-
-        if (this.myConfig["roomId"] == null || this.myConfig["roomId"] == undefined) {
-            return thisClass;
-        }
-
-        let roomId = this.myConfig["roomId"];
-        // console.log("roomSend myConfig", this.myConfig, type, message, roomId);
-        let submit = {
-            "roomId" : roomId,
-            "type" : type,
-            "content" : message,
-        };
-        
-        thisClass.commonSend("roomSendAll", submit);
-
-        return thisClass;
-    }
-
-
-    /**
-     * 给指定cid私聊发送消息
-     * type         自定义类型，该类型你定义的是什么，就会返回什么类型
-     *              如果你是单独处理聊天则填写  chat
-     *              否则你填写别的类型，然后再根据这个类型，单独处理逻辑
-     * 
-     * cid          跟对方私聊的cid值
-     * 
-     * message      给服务端发送的消息，可以是字符串，也可以是json结构
-     *              该参数后续根据 type 参数，来配合开发新的逻辑
-     *              例如我填写 type = chat , 该参数就传字符串聊天的内容
-     *              如果传别的类型，可以传json结构，然后通过该接收的消息，进行特殊处理别的逻辑
-     */
-    cidSend = function(type, cid, message) {
-
-        let thisClass = this;
-
-        let submit = {
-            "cid" : cid,
-            "type" : type,
-            "content" : message,
-        };
-        
-        thisClass.commonSend("cidSend", submit);
-
-        return thisClass;
-    }
-
-
-    /**
-     * 当前房间接收到聊天群发的消息
-     * json
-     */
-    roomChatAllEvent = function(json) {
-
-        let thisClass = this;
-
-        // console.log("roomChatAllEvent", json);
-
-        let cid = json["cid"];
-        let data = json["data"];
-        let dataMessage = data["message"];
-
-        let dataMessageSendCid = dataMessage["sendCid"];
-        let dataMessageMessage = dataMessage["message"];
-        
-        // console.log("roomChatAllEvent", dataMessageSendCid, dataMessageMessage);
-
-        if (thisClass.roomListJson[dataMessageSendCid] == null || thisClass.roomListJson[dataMessageSendCid] == undefined) {
-            return thisClass;
-        }
-
-        let cidJson = thisClass.roomListJson[dataMessageSendCid];
-        if (typeof thisClass.roomChatAllCallback == 'function') {
-            thisClass.roomChatAllCallback(cidJson, dataMessageMessage);
-        }
-
-        return thisClass;
-
-    }
-    
-    /**
-     * 给指定用户发送消息
-     * json
-     */
-    cidSendEvent = function(json) {
-
-        let thisClass = this;
-
-        // console.log( "cidSendEvent", json );
-
-        let cid = json["cid"];
-        let data = json["data"];
-        let dataMessage = data["message"];
-
-        // 哪个cid发起的
-        let dataMessageSendCid = dataMessage["sendCid"];
-        // 接收消息的cid
-        let dataMessageGetCid = dataMessage["getCid"];
-
-        let dataMessageSubmitJson = dataMessage["submitJson"];
-        let dataMessageSubmitJsonMessage = dataMessageSubmitJson["message"];
-        
-        if (thisClass.roomListJson[dataMessageSendCid] == null || thisClass.roomListJson[dataMessageSendCid] == undefined) {
-            return thisClass;
-        }
-
-        if (thisClass.roomListJson[dataMessageGetCid] == null || thisClass.roomListJson[dataMessageGetCid] == undefined) {
-            return thisClass;
-        }
-
-        let sendCidJson = thisClass.roomListJson[dataMessageSendCid];
-        let getCidJson = thisClass.roomListJson[dataMessageGetCid];
-
-        // console.log(
-        //     "cidSendEvent",
-        //     dataMessageSendCid,
-        //     dataMessageSubmitJson,
-        //     dataMessageSubmitJsonMessage,
-        //     dataMessageGetCid,
-        //     sendCidJson,
-        //     getCidJson
-        // );
-
-        if (typeof thisClass.cidSendCallback == 'function') {
-            thisClass.cidSendCallback(sendCidJson, getCidJson, dataMessageSubmitJsonMessage);
-        }
-
-        return thisClass;
-
-    }
-    
-}
-
-
-
-
-
-
-
-

exe/new_src/WebSocket/js/main.js

@@ -1,522 +0,0 @@
-/*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;
-    }
-
-    
-
-}
-
-
-
-
-
-
-
-

exe/new_src/WebSocket/main.html

@@ -1,105 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./css/main.css">
-    <title>demo</title>
-</head>
-<body>
-
-    <div class="app">
-
-        <div class="common">
-            <input type="button" value="开始连接通讯" id="socketStart" />
-        </div>
-
-        <div class="common">
-            <label>房间号：<input type="text" id="room" value="1" /></label>
-            <input type="button" value="进入房间" id="joinRoom" />
-            <label>昵称：<input type="text" id="nickname" value="自定义昵称" /></label>
-        </div>
-
-        <div class="common">
-            <input type="button" value="取消私聊目标" id="objUserExit" />
-            <span>当前私聊的目标cid: <span id="objUserCid">无</span> </span>
-        </div>
-
-        <div class="content">
-
-            <div class="leftTitle" >聊天内容</div>
-            <div class="leftTxt" id="chatList" >
-                
-                <!-- <div class="chat">
-                    <p class="chatTitle">谁发送的</p>
-                    <p class="chatTxt">聊天的内容</p>
-                </div>
-                <div class="chat">
-                    <p class="chatTitle">谁发送的</p>
-                    <p class="chatTxt">聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
-                </div>
-                <div class="chat">
-                    <p class="chatTitle">谁发送的</p>
-                    <p class="chatTxt">聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
-                </div>
-                <div class="chat">
-                    <p class="chatTitle">谁发送的</p>
-                    <p class="chatTxt">聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
-                </div>
-                <div class="chat">
-                    <p class="chatTitle">谁发送的</p>
-                    <p class="chatTxt">聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
-                </div> -->
-
-            </div>
-
-            <div class="rightTitle" >用户列表</div>
-            <div class="rightUser" id="rightUserList" >
-                <!-- <div class="select">1111111</div>
-                <div class="select">2222222222</div>
-                <div class="select">33333333333</div>
-                <div class="select">444444444444444444</div>
-                <div class="select">555555555555555555555555</div>
-                <div class="select">66666666666666666666666666666</div>
-                <div class="select">66666666666666666666666666666</div>
-                <div class="select">66666666666666666666666666666</div> -->
-            </div>
-
-        </div>
-
-        <div class="submitEdit">
-            <textarea id="txtSend" cols="1" rows="1" style="width: 100%;height: 50px;" ></textarea>
-            <input type="button" value="发送" id="subSend" style="position: relative;left: 90%;" />
-        </div>
-
-
-    </div>
-
-    <script src="js/common/jquery-1.11.3.min.js" ></script>
-    <script type="module" >
-        import { Main } from './js/Main.js';
-
-        // 请求得到 websocket 自定义的端口号
-        var apiUrl = "../WebSocketPort.txt";
-        fetch(apiUrl, {
-            method: 'GET',
-            headers: {
-                'Content-Type' : 'application/x-www-form-urlencoded',
-            },
-        }).then(res => {
-            return res.text();
-        }).then(res => {
-
-            // console.log("得到的端口号", res);
-
-            Main.find().protWebSocket = res;
-            Main.find().view();
-            
-        }).catch(error => {
-            
-        });
-        
-    </script>
-    
-</body>
-</html>