js 聊天室代码

import {showToast} from "vant";
import {lStorage} from "@/utils/storage/index.js";
import {domain} from "@/data/config.js";

export const chatConfig = {
    maxLength: 180,
    server: domain.chat_server,
    path: "/cr"
}

export function isMessageType(command) {
    return command == "message" || command == "tips" || command == "image" || command == "file" || command == "confirm";
}

/**
 * 处理消息
 */
class ChatClient {
    constructor(url, data, handleMessage, handleData) {
        this.data = data;
        this.url = url;
        this.handleMessage = handleMessage;
        this.handleData = handleData;
    }

    connect() {
        this.ws = new WebSocket(this.url);
        this.ws.onmessage = (event) => {
            this.data.enter = true;
            this.data.state = "message";
            let obj = JSON.parse(event.data);
            if (obj.command) {
                if (isMessageType(obj.command)) {
                    this.data.messageList.push(obj);
                    cacheChatMessage(this.data.roomId, this.data.messageList);
                    this.handleMessage(obj);
                } else if (obj.command == "data") {
                    this.handleData(obj);
                } else {
                    showToast("消息指令错误,请联系管理员");
                }
            } else {
                showToast("消息格式错误,请联系管理员");
            }
        }
        this.ws.onopen = (event) => {
            this.data.enter = true;
            this.data.state = "open";
            showToast({message: "已连接", duration: 1000});
        }
        this.ws.onerror = (event) => {
            this.data.state = "error";
            this.data.enter = false;
            showToast({message: "服务暂停", duration: 2000});
            console.error(event);
        }
        this.ws.onclose = (event) => {
            this.data.state = "close";
            this.data.enter = false;
            showToast({message: "连接断开", duration: 2000});
        }
    }

    initMessage() {
        this.data.messageList = [];
        let cacheList = getCacheChatMessage(this.data.roomId);
        if (cacheList && cacheList.length > 0) {
            this.data.messageList.push(...cacheList);
        }
    }

    send(message, command) {
        if (this.ws.readyState == WebSocket.OPEN) {
            this.data.state = "message";
            this.data.enter = false;
            let messageObj = {
                "message": message,
                "roomId": this.data.roomId,
                "senderId": this.data.senderId,
                "command": command
            };
            this.ws.send(JSON.stringify(messageObj));
            if (isMessageType(messageObj.command)) {
                this.data.messageList.push(messageObj);
                cacheChatMessage(this.data.roomId, this.data.messageList);
            }
            this.data.enter = true;
        } else if (this.ws.readyState == WebSocket.CONNECTING) {
            showToast("连接中");
            setTimeout(() => {
                this.send(message, command);
            }, 1000)
        } else if (this.ws.readyState == WebSocket.CLOSING || this.ws.readyState == WebSocket.CLOSED) {
            showToast("请重连");
            this.data.enter = false;
            this.data.state = "close";
        }
        return this.ws.readyState;
    }

    sendMessage(message) {
        return this.send(message, "message");
    }

    sendImage(message) {
        return this.send(message, "image");
    }

    sendFile(message) {
        return this.send(message, "file");
    }

    sendConfirm(message) {
        return this.send(message, "confirm");
    }

    sendTips(message) {
        return this.send(message, "tips");
    }

    sendData(message) {
        return this.send(message, "data");
    }

    state() {
        return this.ws.readyState;
    }
}

export const createChatClient = (data, handleMessage, handleData) => {
    let url = "ws://" + chatConfig.server + chatConfig.path;
    let chatRoomClient = new ChatClient(url, data, handleMessage, handleData);
    window["chatRoomClient"] = chatRoomClient;
    return chatRoomClient;
}

export const getChatParam = () => {
    return lStorage.get("_ref_chat_param");
}


export const setChatParam = (senderId, senderName, roleId, roleName, roomId, roomName, kfId, kfName) => {
    lStorage.set("_ref_chat_param", {
        "senderId": senderId,
        "senderName": senderName,
        "roleId": roleId,
        "roleName": roleName,
        "roomId": roomId,
        "roomName": roomName,
        "kfId": kfId,
        "kfName": kfName,
        "time": new Date().getTime()
    });
}

export const cacheChatMessage = (roomId, messageList) => {
    lStorage.set("_ref_chat_message_list_" + roomId, messageList);
}

export const getCacheChatMessage = (roomId) => {
    return lStorage.get("_ref_chat_message_list_" + roomId);
}

export const messageHtml = (html) => {
    if (html) {
        let content = html.trim();
        const p_start = "<p>", p_end = "</p>";
        const br_1 = "<br>", br_2 = "<br/>";
        while (content.startsWith(p_start) && content.endsWith(p_end)) {
            content = content.substring(p_start.length, content.length - p_end.length);
        }
        while (content.startsWith(br_1)) {
            content = content.substring(br_1.length, content.length);
        }
        while (content.startsWith(br_2)) {
            content = content.substring(br_2.length, content.length);
        }
        while (content.endsWith(br_1)) {
            content = content.substring(0, content.length - br_1.length);
        }
        while (content.endsWith(br_2)) {
            content = content.substring(0, content.length - br_2.length);
        }
        return content;
    }
    return "";
}

export function initRoomData() {
    let chatParam = getChatParam();
    if (chatParam && chatParam.roomId && chatParam.senderId) {
        let roomData = {...roomDataExample};
        roomData.kfId = chatParam.kfId;
        roomData.room = {"id": chatParam.roomId};
        roomData.actors[chatParam.senderId] = {
            id: chatParam.senderId,
            name: chatParam.senderName,
            nickname: chatParam.roleName + chatParam.senderId,
            roleId: chatParam.roleId,
            status: "on"
        }
        return roomData;
    }
    return null;
}

export const roomDataExample = {
    "kfId": "",
    "data": null,
    "room": {
        "id": "",
        "name": "",
        "actorCount": "",
        "relActorName": "",
        "adminId": "",
        "status": "",
        "description": "",
    },
    "actors": {}
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值