project
/
workerman_demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							
<!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>