【HTML5-webscoket实时通信（web）】

1. websocket是什么？
   就是用来创建网络聊天室，实时通信
2. websocket的方法有哪些？
   https://developer.mozilla.org/zh-CN/docs/Web/API/WebSockets
3. 如何实现：（以下实现流程）
   前端：

 		 // 直播中// 聊天websocket()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'};//data看需求传什么值，同时与后端协调要什么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)// this.$data.msg.push(data.num);}num = data.num;//this.$data.msg.push(data);}// 建立连接function websocketonopen(e){data = {courseid: courseid,uid:uid,type:'login'// user_nickname:user_nickname,// avatar:avatar,};websocket.send(JSON.stringify(data));console.log('链接成功')// this.$data.msg.push("链接成功")}// 关闭链接function websocketonclose(e){}function websocketonerror(e){}
//通过判断uid==uidItem当前用户id和接受的消息id是不是一样的  一样就自己发送的，不一样就是别人发送的
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"><imgsrc="${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"><imgsrc="${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>`)}}