<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="txtcontent" style="width: 500px;height: 250px;border: 1px solid gray"></div>
    <div>所有用户:<select id="listuers"></select></div>
    <div>你的昵称:<input type="text" id="username" /></div>
    <div>
        回复内容:
        <textarea style="width: 500px;height: 100px" id="txtmsg"></textarea>
    </div>
    <div>
        <button onclick="connectServer()">连接服务器</button>
        <button onclick="send()">发送消息</button>
    </div>
 
    <script>
        var socket = null;  //将socket实例保存到变量中
        var isLogin = false;    //登录标识符
 
        //1、链接服务端
        function connectServer(){
            var username = document.getElementById('username').value;
            //如果用户名为空
            if(username == ''){
                alert('用户昵称不能为空');
            }
 
            //2、实例化
            socket = new WebSocket('ws://192.168.33.10:2346');
 
            //3、打开的时候,发送消息
            socket.onopen = function(){
                socket.send('login:' + username);   //谁登录了
            };
 
            //4、接收服务器返回的数据
            socket.onmessage = function(e){
                //console.log(e);
                var getMsg = e.data;    //返回的数据
 
                //解析getMsg。思路:通过正则匹配,显示出来
                if(/^notice:success$/.test(getMsg)){    //服务端验证通过
                    isLogin = true;
                }else if(/^msg:/.test(getMsg)){         //将服务端返回的普通消息显示出来
                    var p = document.createElement('P');
                    //将msg:替换为空
                    p.innerHTML = '<span>服务端返回的消息:</span>' + getMsg.replace('msg:','');
                    document.getElementById('txtcontent').appendChild(p);   //追加节点
                }else if(/^users:/.test(getMsg)){       //广播(将所有用户昵称显示出来)
                    //console.log(getMsg);
                    nicheng = getMsg.replace('users:','');  //{"61.144.116.123":"yangxi"}
                    shownicheng = eval('('+nicheng+')');    //转json
 
                    var listusers = document.getElementById('listuers');
                    listusers.innerHTML = '';   //先清空
                    for(var key in shownicheng){
                        var option = document.createElement('option');
                        option.value = key; //ip
                        option.innerHTML = shownicheng[key]; //将昵称填充进去
                        listusers.appendChild(option);      //追加节点
                    }
                }else if(/^dian:/.test(getMsg)){ //单播(点对点发消息)
                    //console.log(getMsg);
                    var p = document.createElement('P');    //创建节点
                    //将msg:替换为空
                    p.innerHTML = '<span>单播的消息:</span>' + getMsg.replace('dian:','');
                    document.getElementById('txtcontent').appendChild(p);   //追加节点
                }
            };
            //5、服务端关闭
            socket.onclose = function(){
                isLogin = false;
                alert('服务器断开');
            };
        }
 
        //发送消息按钮
        function send(){
            if(!isLogin){
                alert('请先通过服务器验证');
            }
 
            //获取要发送的内容
            var msg = document.getElementById('txtmsg').value;
            //发送消息给服务端
            socket.send('msg:' + msg);
 
            //单聊,点对点发送消息
            var listusers = document.getElementById('listuers');
            var toUserIPP = listusers.options[listusers.selectedIndex].value;   //收消息的ip
            var toUserName = listusers.options[listusers.selectedIndex].text;   //收消息的昵称
            socket.send('dian:<' + toUserIPP + '>:' + msg);
 
            //将发出的普通消息显示出来
            var p = document.createElement('p');
            p.innerHTML = '<span>客户端发出的消息:</span>' + msg;
            document.getElementById('txtcontent').appendChild(p);
        }
    </script>
</body>
</html>