【JS】WebSocket实现简易聊天室
window.onload = function() {
//选择器封装
let selector = name => document.querySelector(name);
let createEl = dom => document.createElement(dom);
//连接服务器先建立连接，需要客户端和服务端进行握手连接，连接成功后才能相互通讯
var ws = new webSocket("ws://127.o.0.1:8090");
//实例对象的 onopen属性，用于指定连接成功后的回调函数。
ws.onopen = function() {
alert('连接成功')
};
//连接发生错误的回调方法
ws.onerror = function() {
alert('连接失败')
};
//实例对象的 onmessage属性，用于指定收到服务器数据后的回调函数
ws.onmessage = function(data) {
let msg = jSON.parse(data.data);
//显示消息
appendLog(msg)
};
//显示消息
function appendLog({
type,
nickname,
message
}) {
let [msglist, elLi, str] = [selector(".msglist"), createEl("li")];
if (type == "message'){//普通消息
str =
`<div class="user_msg">
<span>${nickname}</span>
<label>${message}</label>
</div>`
}
else if (type == 'notification' || type == 'nick_update') { //系统通知消息
str = `<span class="user_notice">${message}</span>`;
};
if (str) {
elLi.innerHTML = str;
msgList.appendChild(elLi);
}
};
//消息发送
selector("#send").onclick = function() {
let inputMsg = selector(" #message");
if (ws.readyState == webSocket.OPEN) {
ws.send(inputMsg.value)
};
inputMsg.value = ''; //清空
};
//修改昵称
selector("#modify").onclick = function() {
let inputMsg = selector(" #modifyName"
');
if (ws.readystate == webSocket.OPEN) {
//nick_${inputMsg.value}这里具体服务端让你写什么你们具体沟通
ws.send(`/nick_${inputMsg.value}`)
}; I
}
}