client.html 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="txtcontent" style="width: 500px;height: 250px;border: 1px solid gray"></div>
  9. <div>所有用户:<select id="listuers"></select></div>
  10. <div>你的昵称:<input type="text" id="username" /></div>
  11. <div>
  12. 回复内容:
  13. <textarea style="width: 500px;height: 100px" id="txtmsg"></textarea>
  14. </div>
  15. <div>
  16. <button onclick="connectServer()">连接服务器</button>
  17. <button onclick="send()">发送消息</button>
  18. </div>
  19. <script>
  20. var socket = null; //将socket实例保存到变量中
  21. var isLogin = false; //登录标识符
  22. //1、链接服务端
  23. function connectServer(){
  24. var username = document.getElementById('username').value;
  25. //如果用户名为空
  26. if(username == ''){
  27. alert('用户昵称不能为空');
  28. }
  29. //2、实例化
  30. socket = new WebSocket('ws://192.168.33.10:2346');
  31. //3、打开的时候,发送消息
  32. socket.onopen = function(){
  33. socket.send('login:' + username); //谁登录了
  34. };
  35. //4、接收服务器返回的数据
  36. socket.onmessage = function(e){
  37. //console.log(e);
  38. var getMsg = e.data; //返回的数据
  39. //解析getMsg。思路:通过正则匹配,显示出来
  40. if(/^notice:success$/.test(getMsg)){ //服务端验证通过
  41. isLogin = true;
  42. }else if(/^msg:/.test(getMsg)){ //将服务端返回的普通消息显示出来
  43. var p = document.createElement('P');
  44. //将msg:替换为空
  45. p.innerHTML = '<span>服务端返回的消息:</span>' + getMsg.replace('msg:','');
  46. document.getElementById('txtcontent').appendChild(p); //追加节点
  47. }else if(/^users:/.test(getMsg)){ //广播(将所有用户昵称显示出来)
  48. //console.log(getMsg);
  49. nicheng = getMsg.replace('users:',''); //{"61.144.116.123":"yangxi"}
  50. shownicheng = eval('('+nicheng+')'); //转json
  51. var listusers = document.getElementById('listuers');
  52. listusers.innerHTML = ''; //先清空
  53. for(var key in shownicheng){
  54. var option = document.createElement('option');
  55. option.value = key; //ip
  56. option.innerHTML = shownicheng[key]; //将昵称填充进去
  57. listusers.appendChild(option); //追加节点
  58. }
  59. }else if(/^dian:/.test(getMsg)){ //单播(点对点发消息)
  60. //console.log(getMsg);
  61. var p = document.createElement('P'); //创建节点
  62. //将msg:替换为空
  63. p.innerHTML = '<span>单播的消息:</span>' + getMsg.replace('dian:','');
  64. document.getElementById('txtcontent').appendChild(p); //追加节点
  65. }
  66. };
  67. //5、服务端关闭
  68. socket.onclose = function(){
  69. isLogin = false;
  70. alert('服务器断开');
  71. };
  72. }
  73. //发送消息按钮
  74. function send(){
  75. if(!isLogin){
  76. alert('请先通过服务器验证');
  77. }
  78. //获取要发送的内容
  79. var msg = document.getElementById('txtmsg').value;
  80. //发送消息给服务端
  81. socket.send('msg:' + msg);
  82. //单聊,点对点发送消息
  83. var listusers = document.getElementById('listuers');
  84. var toUserIPP = listusers.options[listusers.selectedIndex].value; //收消息的ip
  85. var toUserName = listusers.options[listusers.selectedIndex].text; //收消息的昵称
  86. socket.send('dian:<' + toUserIPP + '>:' + msg);
  87. //将发出的普通消息显示出来
  88. var p = document.createElement('p');
  89. p.innerHTML = '<span>客户端发出的消息:</span>' + msg;
  90. document.getElementById('txtcontent').appendChild(p);
  91. }
  92. </script>
  93. </body>
  94. </html>