xgqfrms
commented
5 years ago
"use strict";
/**
*
* @author xgqfrms
* @license MIT
* @copyright xgqfrms
*
* @description WS client
* @augments
* @example
* @link
*
*/
const url = `ws://www.xgqfrms.xyz/chat/?token=666666`;
let ws = new WebSocket(url);
let log = console.log;
ws.onopen = function(e) {
log(`已经建立连接 open`, ws.readyState);
log(`B uid = 6845422`);
// log(`e = `, e);
if (ws.readyState === 1) {
allReady();
}
};
ws.onerror = function(e) {
log(`连接异常 error`, ws.readyState);
// log(`e = `, e);
// if (ws.readyState === 4) {
// unSubscribe();
// }
unSubscribe();
};
ws.onmessage = function(res) {
log(`B 收到消息 message`, ws.readyState);
let data = res.data;
data = JSON.parse(data);
// let origin = res.origin;
// log(`res & e = `, res);
// log(`typeof(data) = `, typeof(data));
// log(`res.origin = `, origin);
log(`res.data = `, JSON.stringify(data, null, 4));
let {
Action,
} = data;
switch (Action) {
case 20:
let {
// SendUserID,
Info,
} = data;
handleList(Info);
break;
case 21:
(() => {
let {
SendUserID,
Info,
} = data;
handleNewMessages(Info, SendUserID);
})();
break;
case 1:
if (Action) {
handleNew();
} else {
handleMessage();
}
break;
case 4:
// subscribe();
break;
case 5:
// unSubscribe();
break;
default:
// sendMsg();
break;
}
};
ws.onclose = function(e) {
log(`已经关闭连接 close`, ws.readyState);
if (ws.readyState === 3) {
// 关闭连接
unSubscribe();
}
// log(`e = `, e);
};
const allReady = () => {
let msg = {
Action: 20,
LastMsgIds: [],
};
log(`B 准备就绪`);
let str_msg = JSON.stringify(msg);
ws.send(str_msg);
};
const sendMsg = (text = `` ) => {
let msg = {
Action: 1,
ReciveUserID: "6845488",
Info: text ? text : `B 文本消息 text`,
MsgType: 1,// 消息类型，number, 可取值: 1-文本、2-图片、3-表情、4-视频、5-音频
};
// let msg = {
// Action: 1,
// SendUserID: "6845422",
// ReciveUserID: "6845488",
// SerialNumber: "消息序列",
// Info: text,
// MsgType: 1,// 消息类型，number, 可取值: 1-文本、2-图片、3-表情、4-视频、5-音频
// };
log(`B 发送聊天消息`);
let str_msg = JSON.stringify(msg);
ws.send(str_msg);
};
const handleList = (datas = [], debug = false) => {
// log(`list =`, JSON.stringify(datas, null, 4));
let result = [];
let chat_list_uids = [];
if (datas.length) {
datas.forEach(
(obj, i) => {
let {
ChatUserName: userName,
ChatUserID: userId,
CompanyName: corpName,
Top: isTop,
Hide: isHidden,
} = obj;
let temp = {
userName,
userId,
corpName,
isTop,
isHidden,
text: "default news placeholder",
time: "",
count: 0,
};
result.push(temp);
chat_list_uids.push(userId);
// chat_list_uids.push({
// userId,
// });
}
);
}
listAutoGenerator(result);
// TODO old + new
window.localStorage.setItem(`chat_list`, JSON.stringify(result));
window.localStorage.setItem(`chat_list_uids`, JSON.stringify(chat_list_uids));
// return result;
};
const handleNewMessages = (datas = [], selfId = ``, debug = false) => {
// log(`New Messages =`, JSON.stringify(datas, null, 4));
let result = [];
let chat_list = JSON.parse(window.localStorage.getItem(`chat_list`));
let chat_list_uids = JSON.parse(window.localStorage.getItem(`chat_list_uids`));
log(`chat_list =`, chat_list);
log(`chat_list_uids =`, chat_list_uids);
if (chat_list_uids.length) {
window.DB = window.DB || {};
chat_list_uids.forEach(
(item, i) => {
window.DB[item] = window.DB[item] || [];
// DB Store
}
);
}
// chat_list_uids.includes(senderUid);
if (datas.length) {
datas.forEach(
(obj, i) => {
let {
SendUserID: senderUid,
ReciveUserID: receiverUid,
SerialNumber: serialNum,
MsgID: msgId,
Info: text,
// MsgType: msgType,
SendTime: time,
UnReadMsgCount: count,
} = obj;
if (senderUid !== selfId) {
let temp = {
senderUid,
receiverUid,
serialNum,
msgId,
// msgType,
text,
time,
count,
};
window.DB[senderUid].push(temp);
// result.push(temp);
// window.DB[6845333];
}
}
);
}
// listAutoUpdater(result);
// window.localStorage.setItem(`chat_list_messages`, JSON.stringify(result));
// return result;
};
const handleNew = (datas = [], debug = false) => {
//
};
const handleMessage = (datas = [], debug = false) => {
//
};
const handleHistoryMessage = (datas = [], debug = false) => {
// self + others
};
let LastMsgId = ``;
const subscribe = () => {
let msg = {
Action: 4,
SendUserID: "6845422",
ReciveUserID: "6845488",
SerialNumber: "消息序列",
LastMsgId: 605337337539633200,
// LastMsgId: LastMsgId,
// LastMsgId,
};
log(`B 订阅消息`);
let str_msg = JSON.stringify(msg);
ws.send(str_msg);
};
const unSubscribe = () => {
let msg = {
Action: 5,
};
log(`B 取消订阅`);
let str_msg = JSON.stringify(msg);
ws.send(str_msg);
log(`B 取消订阅 OK`);
};
const listAutoGenerator = (list = []) => {
// log(`%cchat_list =`, `color: #f0f;`, `%c${JSON.stringify(list, null, 4)}`, `color: red;`);
// log(`%cchat_list =\n%c${JSON.stringify(list, null, 4)}`, `color: #f0f;`, `color: #0f0; background: #000;`);
log(`%cchat_list =\n%c${JSON.stringify(list, null, 4)}`, `color: #f0f;`, `color: #3f3;`);
let msgBox = document.querySelector(`[data-dom="msg-box"]`);
let html = ``;
if (list.length) {
list.forEach(
(obj, i) => {
let {
userName,
// userId,
// corpName,
text,
count,
// time,
} = obj;
if (count > 0) {
html += `
<p class="msg" data-uid="">
<span class="msg-name">${userName}</span>
${text}
<span class="msg-count">${count}</span>
</p>
`;
} else {
html += `
<p class="msg" data-uid="">
<span class="msg-name">${userName}</span>
${text}
</p>
`;
}
}
);
msgBox.insertAdjacentHTML(`beforeend`, html);
}
};
let msgBox = document.querySelector(`[data-dom="msg-box"]`);
const autoListBind = () => {
let msgs = [...document.querySelectorAll(`[data-dom="msg"]`)];
if (msgs.length) {
msgs.forEach(
(msg, i) => {
let bindOnceFlag = msg.dataset.bindOnceFlag || false;
if (!bindOnceFlag) {
msg.addEventListener(`click`, () => {
msg.dataset.bindOnceFlag = true;
// i ??? data-uid
});
}
}
)
}
};
websocket & bug
https://www.cnblogs.com/xgqfrms/p/11067070.html
https://www.cnblogs.com/xgqfrms/p/11242198.html