- websocket是什么?
就是用来创建网络聊天室,实时通信
- websocket的方法有哪些?
https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets
- 如何实现:(以下实现流程)
前端:
const wsurl = 'wss://...';
var websocket = new WebSocket(wsurl);
websocket.onopen = websocketonopen;
websocket.onmessage = websocketonmessage;
websocket.onerror = websocketonerror;
websocket.onclose = websocketonclose;
$('.sendBtn').click(()=>{
send()
})
function send(){
content = $('#content').val()
let data = {
fd:fd,
content:content,
courseid: courseid,
uid:uid,
user_nickname:user_nickname,
avatar:avatar,
liveuid:liveuid,
type:'msg'
};
websocket.send(JSON.stringify(data));
$('#content').val('')
}
function websocketonmessage(e){
var data = JSON.parse(e.data);
if(data.type =='login'){
console.log(data.fd+'进入了聊天室')
}
if(data.type=='close'){
console.log(data.fd+'离开了聊天室')
}
if(data.type=='msg'){
var recev_msg = JSON.parse(data.data);
messageItem(recev_msg.uid,recev_msg)
}
if(data.type=='num'){
console.log(data)
}
fd = data.fd;
if(data.type=='login'){
console.log(data.num)
}
num = data.num;
}
function websocketonopen(e){
data = {
courseid: courseid,
uid:uid,
type:'login'
};
websocket.send(JSON.stringify(data));
console.log('链接成功')
}
function websocketonclose(e){
}
function websocketonerror(e){
}
function messageItem(uidItem,item){
if(uid==uidItem){
$('.live-discussion-content-top').append(`
<div class="send-message-content">
<div class="receive-message-item">
<div class="receive-message-item flex align-items justify-end">
<div class="receive-content">
<div class="send-user-name">${item.user_nickname}</div>
<div class="send-content">${item.content}</div>
</div>
<div class="receive-photo"><img
src="${item.avatar}"
alt="用户头像"></div>
</div>
</div>
</div>
`)
}else{
$('.live-discussion-content-top').append(`
<div class="receive-message-content">
<div class="receive-message-item flex align-items">
<div class="receive-photo"><img
src="${item.avatar}"
alt="用户头像"></div>
<div class="receive-content">
<div class="user-name">${item.user_nickname}</div>
<div class="user-content">${item.content}</div>
</div>
</div>
</div>
`)
}
}