test.html 2.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>WebSocket</title>
  6. </head>
  7. <body>
  8. <h3>hello socket</h3>
  9. <p>【userId】:<div><input id="userId" name="userId" type="text" value="10"></div>
  10. <p>【toUserId】:<div><input id="toUserId" name="toUserId" type="text" value="20"></div>
  11. <p>【toUserId】:<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
  12. <p>操作:<div><a onclick="openSocket()">开启socket</a></div>
  13. <p>【操作】:<div><a onclick="sendMessage()">发送消息</a></div>
  14. </body>
  15. <script>
  16. var socket;
  17. function openSocket() {
  18. if(typeof(WebSocket) == "undefined") {
  19. console.log("您的浏览器不支持WebSocket");
  20. }else{
  21. console.log("您的浏览器支持WebSocket");
  22. //实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接
  23. var userId = document.getElementById('userId').value;
  24. // var socketUrl="ws://127.0.0.1:22599/webSocket/"+userId;
  25. var socketUrl="ws://47.75.159.72:8000/webSocket?Access-Token=ZUxUE6VveVDjr/CMhyhxuNlIUISdD7hzXpIfTS8bVW/ZkdhXeH6L71ymZEXJro4c";
  26. console.log(socketUrl);
  27. if(socket!=null){
  28. socket.close();
  29. socket=null;
  30. }
  31. socket = new WebSocket(socketUrl);
  32. //打开事件
  33. socket.onopen = function() {
  34. console.log("websocket已打开");
  35. //socket.send("这是来自客户端的消息" + location.href + new Date());
  36. };
  37. //获得消息事件
  38. socket.onmessage = function(msg) {
  39. var serverMsg = "收到服务端信息:" + msg.data;
  40. console.log(serverMsg);
  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. function sendMessage() {
  54. if(typeof(WebSocket) == "undefined") {
  55. console.log("您的浏览器不支持WebSocket");
  56. }else {
  57. // console.log("您的浏览器支持WebSocket");
  58. var toUserId = document.getElementById('toUserId').value;
  59. var contentText = document.getElementById('contentText').value;
  60. var msg = '{"toUserId":"'+toUserId+'","contentText":"'+contentText+'"}';
  61. console.log(msg);
  62. socket.send(msg);
  63. }
  64. }
  65. </script>
  66. </html>