main.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="./css/main.css">
  7. <title>demo</title>
  8. </head>
  9. <body>
  10. <div class="app">
  11. <div class="common">
  12. <input type="button" value="开始连接通讯" id="socketStart" />
  13. </div>
  14. <div class="common">
  15. <label>房间号:<input type="text" id="room" value="1" /></label>
  16. <input type="button" value="进入房间" id="joinRoom" />
  17. <label>昵称:<input type="text" id="nickname" value="自定义昵称" /></label>
  18. </div>
  19. <div class="common">
  20. <input type="button" value="取消私聊目标" id="objUserExit" />
  21. <span>当前私聊的目标cid: <span id="objUserCid">无</span> </span>
  22. </div>
  23. <div class="content">
  24. <div class="leftTitle" >聊天内容</div>
  25. <div class="leftTxt" id="chatList" >
  26. <!-- <div class="chat">
  27. <p class="chatTitle">谁发送的</p>
  28. <p class="chatTxt">聊天的内容</p>
  29. </div>
  30. <div class="chat">
  31. <p class="chatTitle">谁发送的</p>
  32. <p class="chatTxt">聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
  33. </div>
  34. <div class="chat">
  35. <p class="chatTitle">谁发送的</p>
  36. <p class="chatTxt">聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
  37. </div>
  38. <div class="chat">
  39. <p class="chatTitle">谁发送的</p>
  40. <p class="chatTxt">聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
  41. </div>
  42. <div class="chat">
  43. <p class="chatTitle">谁发送的</p>
  44. <p class="chatTxt">聊天的内容聊天的内容聊天的内容聊天的内容聊天的内容</p>
  45. </div> -->
  46. </div>
  47. <div class="rightTitle" >用户列表</div>
  48. <div class="rightUser" id="rightUserList" >
  49. <!-- <div class="select">1111111</div>
  50. <div class="select">2222222222</div>
  51. <div class="select">33333333333</div>
  52. <div class="select">444444444444444444</div>
  53. <div class="select">555555555555555555555555</div>
  54. <div class="select">66666666666666666666666666666</div>
  55. <div class="select">66666666666666666666666666666</div>
  56. <div class="select">66666666666666666666666666666</div> -->
  57. </div>
  58. </div>
  59. <div class="submitEdit">
  60. <textarea id="txtSend" cols="1" rows="1" style="width: 100%;height: 50px;" ></textarea>
  61. <input type="button" value="发送" id="subSend" style="position: relative;left: 90%;" />
  62. </div>
  63. </div>
  64. <script src="js/common/jquery-1.11.3.min.js" ></script>
  65. <script type="module" >
  66. import { Main } from './js/Main.js';
  67. // 请求得到 websocket 自定义的端口号
  68. var apiUrl = "../WebSocketPort.txt";
  69. fetch(apiUrl, {
  70. method: 'GET',
  71. headers: {
  72. 'Content-Type' : 'application/x-www-form-urlencoded',
  73. },
  74. }).then(res => {
  75. return res.text();
  76. }).then(res => {
  77. // console.log("得到的端口号", res);
  78. Main.find().protWebSocket = res;
  79. Main.find().view();
  80. }).catch(error => {
  81. });
  82. </script>
  83. </body>
  84. </html>