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