webSocket.html 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>WebSocket消息通知</title>
  6. </head>
  7. <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
  8. <script>
  9. var socket;
  10. //打开WebSocket
  11. function openSocket() {
  12. if (typeof (WebSocket) === "undefined") {
  13. console.log("您的浏览器不支持WebSocket");
  14. } else {
  15. console.log("您的浏览器支持WebSocket");
  16. //实现化WebSocket对象,指定要连接的服务器地址与端口,建立连接.
  17. let socketUrl = location.origin + "/websocket";
  18. //将https与http协议替换为ws协议
  19. socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
  20. console.log(socketUrl);
  21. if (socket != null) {
  22. socket.close();
  23. socket = null;
  24. }
  25. socket = new WebSocket(socketUrl);
  26. //打开事件
  27. socket.onopen = function () {
  28. console.log("WebSocket已打开");
  29. //socket.send("这是来自客户端的消息" + location.href + new Date());
  30. };
  31. //获得消息事件
  32. socket.onmessage = function (msg) {
  33. try {
  34. //发现消息进入,开始处理前端触发逻辑
  35. var data = JSON.parse(msg.data);
  36. if ([10101, 10102, 10103, 10104].indexOf(data.cmd) === -1) {
  37. console.log("收到消息:",msg.data);
  38. }
  39. } catch (error) {
  40. console.log(error);
  41. }
  42. };
  43. //关闭事件
  44. socket.onclose = function () {
  45. console.log("WebSocket已关闭");
  46. };
  47. //发生了错误事件
  48. socket.onerror = function () {
  49. console.log("WebSocket发生了错误");
  50. }
  51. }
  52. }
  53. //发送消息
  54. function sendMessage() {
  55. if (typeof (WebSocket) === "undefined") {
  56. console.log("您的浏览器不支持WebSocket");
  57. } else {
  58. var data = $("#dataId").val();
  59. console.log("发送数据:", data);
  60. socket.send(data);
  61. }
  62. }
  63. function closeSocket() {
  64. if (typeof (WebSocket) === "undefined") {
  65. console.log("您的浏览器不支持WebSocket");
  66. } else {
  67. console.log("WebSocket已经关闭");
  68. if (socket != null) {
  69. socket.close();
  70. socket = null;
  71. }
  72. }
  73. }
  74. </script>
  75. <body>
  76. <div>
  77. <button onclick="openSocket()">开启socket</button>
  78. <button onclick="closeSocket()">关闭socket</button>
  79. </div>
  80. <div>
  81. <label for="dataId">发送数据</label>
  82. <input id="dataId" name="uid" type="text" value='{"cmd":20202,"data":{"tvmNo":"5","state":1}}' style="width: 500px;">
  83. </div>
  84. <div>
  85. <button onclick="sendMessage()">发送消息</button>
  86. </div>
  87. <!--<div>-->
  88. <!-- <label for="messageId">接受数据</label>-->
  89. <!-- <input id="messageId" name="msg" type="text" value="hello WebSocket2"></div>-->
  90. <!--</body>-->
  91. </html>