超级简单的WebSocket的聊天应用

超级简单的WebSocket的聊天应用

1.定义消息类型

2.定义WebSocket的实例类型

3.定义聊天消息model

4.定义Socket连接、发送消息、发送心跳类

5.定义发布订阅类，用于新消息来了立即发布接收到的消息到相关的页面

6.实现网页打开时，连接服务器；关闭页面时，断开socket连接

7.收到消息后，发送浏览器外的通知

1.YLGroupChatProtocol 是定义的聊天消息类型，不同的ID对应不同的消息

// 通信协议定义
class YLGroupChatProtocol { 
    constructor () {
      this.create_room                = 1001;
      this.send_content               = 1002;
      this.send_qiniu_image           = 1003;
      this.send_file                  = 1004;
      this.newUserBroadcast           = 1005;  // 新用户连接时，广播消息给所有的用户
      this.heartbeat                  = 1006;  // 心跳
    }
}

2.这是 WebSocket 状态 ，按照官方描述的来定义的

WebSocket文档：https://developer.mozilla.org/en-US/docs/Web/API/WebSocket/readyState

class YLWebSocketReadyState {
    constructor () {
        this.CONNECTING    = 0;	// Socket has been created. The connection is not yet open.
        this.OPEN          = 1; // The connection is open and ready to communicate.
        this.CLOSING       = 2;	// The connection is in the process of closing.
        this.CLOSED        = 3;	// The connection is closed or couldn't be opened.
    }
}

3.定义聊天消息消息实体model

class YLChatMessageModel {
    constructor () { 
        this.protocol = "";
        this.roomUUID = "";
        this.sender = "";
        this.content = "";
        this.imagekey = ""; // 图片的七牛云key
        this.uuid = ""; // 消息UUID
        this.users = null; // 用户列表
        this.client_ip = ""; // 用户真实IP
        this.rawProtocol = new YLGroupChatProtocol();
    }

    setData (data) {
        let jsonDict = JSON.parse(data);
        this.protocol = jsonDict["protocol"];
        if (this.protocol == this.rawProtocol.heartbeat) {
            
        } else if (this.protocol == this.rawProtocol.send_content) {
            this.roomUUID = jsonDict["roomUUID"];
            this.client_ip = jsonDict["client_ip"];
            this.sender = jsonDict["sender"];
            this.content = jsonDict["content"];
            this.uuid = jsonDict["uuid"];
        } else if (this.protocol == this.rawProtocol.send_qiniu_image) {
            this.roomUUID = jsonDict["roomUUID"];
            this.client_ip = jsonDict["client_ip"];
            this.sender = jsonDict["sender"];
            this.content = jsonDict["content"];
            this.imagekey = jsonDict["imagekey"];
            this.uuid = jsonDict["uuid"];
        } else if (this.protocol == this.rawProtocol.newUserBroadcast) {
            this.roomUUID = jsonDict["roomUUID"];
            this.client_ip = jsonDict["client_ip"];
            this.users = jsonDict["users"];
        }
    }

}

4.定义Socket连接、发送消息、发送心跳类

'use strict';
// 群组聊天
class YLGroupChatWebSocket {
    constructor () {
        this.current_user = null; // 当前登录用户实例对象
        this._group_ws = null;
        this.heartbeat_enabled = false; // 心跳包是否启用
        var ws_protocol = 'https:' == document.location.protocol ? "wss:": "ws:"; 
        this._roomUUID = "yooulchat2019"; 
        // 测试域名
        let test_domains = [ 
                            "localhost:8080", 
                            "localhost:9000",
                            ];
        let real_domain = "";
        if (test_domains.indexOf(window.location.host) != -1) {
            // 测试环境
            real_domain = "ws://test.yourdomain.com";
        } else {
            // 线上环境
            real_domain = "wss://yourdomain.com";
        } 
        this._group_ws_url = real_domain + "/stream/ws/gchat/" + this._roomUUID;

        // 临时的消息暂存
        this.tmp_message_protocol = null;
        this.tmp_message_content = null;
    }

    // 连接服务器 
    connect_to_server () {
        if (!this.hasLogin()) {
            console.log("请选登录！");
            return;
        }
        this._group_ws = new WebSocket(this._group_ws_url);
        this._group_ws.binaryType = "arraybuffer";
        var that = this;
        this._group_ws.onopen = function (event) {
            console.log("成功连接到服务器！");
            window.YLNotificationMessages.publish(window.YLNotificationMessageType.connected, event);
            // 重新连接上服务器后，把消息发出去 
            if (that.tmp_message_protocol != null && that.tmp_message_content != null) {
                that.send_content(that.tmp_message_protocol, that.tmp_message_content);
                that.tmp_message_protocol = null;
                that.tmp_message_content = null;
            }
            // 新加入连接的用户，发给服务器记录起来
            let rawProtocol = new YLGroupChatProtocol();
            that.send_content(rawProtocol.newUserBroadcast, "");
            // 定期发送心跳包
            that.heartbeat_enabled = true;
            that.send_heartbeat_periodically();
        }
        this._group_ws.onmessage = function (event) {
            // console.log("收到消息了", event)
            let msgModel = new YLChatMessageModel();
            msgModel.setData(event.data);
            if (msgModel.protocol == new YLGroupChatProtocol().heartbeat) {
                return;
            }
            // 发送消息到聊天的页面上显示
            window.YLNotificationMessages.publish(window.YLNotificationMessageType.receive_messages, msgModel);
        }
        this._group_ws.onclose = function (event) {
            console.log("与服务器已断开连接。", event);
            this.heartbeat_enabled = false;
            window.YLNotificationMessages.publish(window.YLNotificationMessageType.disconnected, event);
            if (that.hasLogin() && window.location.pathname.indexOf("/chatbox") > -1) {
                console.log("正在重新连接..."); 
                that.connect_to_server();
            }
        }
        this._group_ws.onerror = function (err) {
            console.log(err);
            this.heartbeat_enabled = false;
            window.YLNotificationMessages.publish(window.YLNotificationMessageType.socket_error, err);
        } 
    }

    // 发送数据到服务器
    send_content (protocolEnumVal, content, imagekey="") { 
        if (window.location.pathname.indexOf("/chatbox") == -1) {
            return;
        }
        if (!this.hasLogin()) {
            console.log("请选登录！");
            return;
        }
        if (this._group_ws == null) {
            this.connect_to_server();
            // 暂存发送的消息，待重新连接上服务器后，再把消息发出去
            this.tmp_message_protocol = protocolEnumVal;
            this.tmp_message_content = content; 
            return;
        }
        if ((this._group_ws.readyState == window.YLWebSocketReadyState.CLOSING || 
            this._group_ws.readyState == window.YLWebSocketReadyState.CLOSED)) {
            if (confirm("您与全球用户聊天已失去连接，是否自动连接？")) {
                this.connect_to_server();
                // 暂存发送的消息，待重新连接上服务器后，再把消息发出去
                this.tmp_message_protocol = protocolEnumVal;
                this.tmp_message_content = content; 
            }
            return;
        }  
        // 当前登录用户的User对象（游客）
        var token = window.localStorage.getItem("token");
        if (token == undefined || token == null) { 
            token = window.sessionStorage.getItem("token_guest");
        }
        // 当前登录用户的User对象
        var yooulUserStr = window.localStorage.getItem("$Yoouluser");
        if (yooulUserStr == undefined || yooulUserStr == null) {
            yooulUserStr = window.sessionStorage.getItem("$Yooulguest");
        }
        let data = {
            "protocol" : protocolEnumVal,
            "roomUUID" : this._roomUUID,
            "token": token,
            "content" : content,
            "sender": JSON.parse(yooulUserStr)
        }
        let rawProtocol = new YLGroupChatProtocol();
        if (protocolEnumVal == rawProtocol.send_qiniu_image && imagekey.length > 0) {
            data["imagekey"] = imagekey;
        }
        let jsonData = JSON.stringify(data)
        this._group_ws.send(jsonData);
    }

    // 关闭WebSocket链接
    close_connection () {
        if (this._group_ws != null) {
            this._group_ws.close();
            this._group_ws = null;
        }
    }

    // 间隔30秒发送心跳包
    send_heartbeat_periodically() {
        // 当前登录用户的User对象
        let self = this;
        var myHeartBeatInterval = window.setInterval(() => {
            if (!this.heartbeat_enabled) {
                // 关闭计时器
                window.clearInterval(myHeartBeatInterval);
                return;
            }
            let data = {"protocol" : new YLGroupChatProtocol().heartbeat} 
            let jsonData = JSON.stringify(data)
            self._group_ws.send(jsonData);
        }, 30 * 1000);
    }

    getUUID () {
        var d = new Date().getTime();
        if (window.performance && typeof window.performance.now === "function") {
            d += performance.now(); //use high-precision timer if available
        }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = (d + Math.random() * 16) % 16 | 0;
            d = Math.floor(d / 16);
            return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
        });
        return uuid; 
    }

    hasLogin () {
        var token = "Your token";
        if (token != null) {
            return true;
        }
        return false;
    }
}


// 定义通知类型
class YLNotificationMessageType { 
    constructor () {
        this.socket_error            = -1; // socket发生错误
        this.connected               = 1;  // 已连接到服务器
        this.reconnect               = 2;  // 重新连接服务器
        this.receive_messages        = 3;  // 接收消息
        this.disconnected            = 4;  // 客户端已掉线
    }
}

5.定义发布订阅类，用于新消息来了立即发布接收到的消息到相关的页面

// 消息通知
// 发布/订阅模式
class YLNotificationMessages {
    constructor () {
        // 事件对象：存放事件的订阅名字和回调
        this.events = {};
    }
    // 订阅事件
    subscribe (eventName, callback) { 
        if (!this.events[eventName]) {
            // 一个名称可以有多个订阅回调事件，所以使用数组存储回调
            this.events[eventName] = [callback];
        } else {
            // 如果该事件名称存在，则继续往该名称添加回调事件
            this.events[eventName].push(callback);
        }
    }
    // 发布事件
    publish (eventName, ...args) {
        this.events[eventName] && this.events[eventName].forEach(cb => cb(...args));
    }
    // 取消订阅事件
    unsubscribe (eventName, callback) { 
        if (this.events[eventName]) {
            // 找到该回调，并移除它  
            // this.events[eventName].filter(cb => cb != callback); // 不管用
            var _events = [];
            for (var i = 0; i < this.events[eventName].length; i++) {
                if (this.events[eventName][i].toString()!=callback.toString()) {
                    _events.push(this.events[eventName][i]);
                }
            }
            this.events[eventName] = _events;
        }
    }
    // 取消订阅所有事件
    unsubscribeAll(eventName) {
      if (this.events[eventName]) {
        this.events[eventName] = [];
      }
    }
    
}

// 注册到Window对象中
window["YLNotificationMessageType"] = new YLNotificationMessageType();
window["YLNotificationMessages"] = new YLNotificationMessages();
window["YLGroupChatProtocol"] = new YLGroupChatProtocol();
window["YLWebSocketReadyState"] = new YLWebSocketReadyState();
window["YLGroupChatWebSocket"] = new YLGroupChatWebSocket();  

6.实现网页打开时，连接服务器；关闭页面时，断开socket连接

// 当页面关闭或强制刷新时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常
window.onbeforeunload = function() {
    console.log("客户端连接已关闭"); 
    if (isUserLoginWhenConnectingToWSServer()) {
        window.YLGroupChatWebSocket.close_connection();

        // 取消订阅事件，取消接收聊天消息
        window.YLNotificationMessages.unsubscribe(window.YLNotificationMessageType.receive_messages, chatReceiveMessagesCallback);
    }
} 

window.onload = function () { 
    grantNotification();

    // 仅打开聊天界面时才开启WebSocket聊天
    // 等待页面加载完后再去连接WebSocket服务 
    if (isUserLoginWhenConnectingToWSServer()) {
        window.YLGroupChatWebSocket.connect_to_server()

        // 订阅事件，接收聊天消息
        window.YLNotificationMessages.subscribe(window.YLNotificationMessageType.receive_messages, chatReceiveMessagesCallback);
    }
}

// 连接WebSocket服务器时判断一下登录状态
function isUserLoginWhenConnectingToWSServer() {
    var token = "You token";
    if (token != null) {
        return true;
    }
    return false;
}

// 订阅事件，接收聊天消息回调
function chatReceiveMessagesCallback(data) {
    let rawProtocol = new YLGroupChatProtocol();
    var yooulUserStr = window.localStorage.getItem("$Yoouluser");
    let yooulUser = JSON.parse(yooulUserStr);
    if (yooulUser.user_name == data.sender.user_name && yooulUser.user_id == data.sender.user_id) { 
        // 如果是自己的消息，则不通知
    } else if (data.protocol == rawProtocol.send_content || data.protocol == rawProtocol.send_qiniu_image) {
        if (window.location.pathname == "/chatbox") {
            // 当用户在聊天页面时，不显示通知
            return;
        }
        // 只通知收到别人发的消息
        showBrowserNotification(data.sender.user_avatar, data.content);
    }
}

7.收到消息后，发送浏览器外的通知

// 显示浏览器通知
function showBrowserNotification(msgAvatar, msgContent) {
    console.log("用户设定的通知状态是：", Notification.permission);
    if (Notification.permission !== 'granted') {
        Notification.requestPermission();
    } else {
        var notification = new Notification('有人给你发送了消息', {
            icon: msgAvatar,
            body: msgContent,
        });
        notification.onclick = function() {
            window.open('/chatbox');
        };
    }
}

// 授权显示通知
function grantNotification() {
    if (Notification.permission !== 'granted') {
        Notification.requestPermission();
    }
}

完整代码：
https://gist.github.com/VictorZhang2014/3811b38aea41390039cbbe79d9dad0a3