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>