【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"><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>
            `)
        }
    }