来源：https://www.shuzhiduo.com/A/l1dyDjmG5e/
1前言
websocket 一般 每隔 90 秒无操作则会自动断开  ，需要加入一个心跳机制 来防止 自断
2. 实验过程

（1）设定一个jsp 或html 文件都行 ，加入元素

（2）js 源码 ，点击查看


			
    
				
  1. 
					1 //避免重复链接
    2. 
				
  2. 
					2 var lockReconnect = false;
    3. 
				
  3. 
					3 //路径
    4. 
				
  4. 
					4 var wsUrl = $("#wsUrl").val();
    5. 
				
  5. 
					5 console.log("路径" + wsUrl);
    6. 
				
  6. 
					6 //webSocket对象
    7. 
				
  7. 
					7 var ws;
    8. 
				
  8. 
					8 //时间间隔
    9. 
				
  9. 
					9 var tt;
    10. 
				
  10. 
					10
    11. 
				
  11. 
					11 if ("WebSocket" in window) {
    12. 
				
  12. 
					12 console.log("支持WebSocket")
    13. 
				
  13. 
					13 } else {
    14. 
				
  14. 
					14 alert("该浏览器不支持WebSocket")
    15. 
				
  15. 
					15 }
    16. 
				
  16. 
					16
    17. 
				
  17. 
					17 //创建ws连接
    18. 
				
  18. 
					18 var createWebSocket = function (wsUrl) {
    19. 
				
  19. 
					19 try {
    20. 
				
  20. 
					20 //成功
    21. 
				
  21. 
					21 ws = new WebSocket(wsUrl);
    22. 
				
  22. 
					22 webSocketInit();//初始化webSocket连接函数
    23. 
				
  23. 
					23 } catch (e) {
    24. 
				
  24. 
					24 //失败
    25. 
				
  25. 
					25 console.log('catch');
    26. 
				
  26. 
					26 //重连
    27. 
				
  27. 
					27 //重连函数
    28. 
				
  28. 
					28 webSocketReconnect(wsUrl);
    29. 
				
  29. 
					29 }
    30. 
				
  30. 
					30 };
    31. 
				
  31. 
					31 //初始化方法，成功后执行
    32. 
				
  32. 
					32 var webSocketInit = function () {
    33. 
				
  33. 
					33 //连接关闭函数
    34. 
				
  34. 
					34 ws.onclose = function () {
    35. 
				
  35. 
					35 console.log("连接已关闭...");
    36. 
				
  36. 
					36 webSocketReconnect(wsUrl)//如果连接关闭则重连
    37. 
				
  37. 
					37 };
    38. 
				
  38. 
					38 //连接错误函数
    39. 
				
  39. 
					39 ws.onerror = function () {
    40. 
				
  40. 
					40 console.log("连接错误...");
    41. 
				
  41. 
					41 webSocketReconnect(wsUrl)//如果连接错误则重连
    42. 
				
  42. 
					42 };
    43. 
				
  43. 
					43 //连接建立,发送信息
    44. 
				
  44. 
					44 ws.onopen = function () {
    45. 
				
  45. 
					45 var message1 = {
    46. 
				
  46. 
					46 "type": "SUB",
    47. 
				
  47. 
					47 "service": "业务1-确认第一次发送信息"
    48. 
				
  48. 
					48 };
    49. 
				
  49. 
					49 ws.send(JSON.stringify(message1));//webSocket业务订阅——可以有多个业务
    50. 
				
  50. 
					50 // var message2 = {
    51. 
				
  51. 
					51 // "type": "SUB",
    52. 
				
  52. 
					52 // "service": "业务2"
    53. 
				
  53. 
					53 // };
    54. 
				
  54. 
					54 // ws.send(JSON.stringify(message2));
    55. 
				
  55. 
					55 //心跳检测启动
    56. 
				
  56. 
					56 heartCheck.start();//订阅业务发送之后启动心跳检测机制
    57. 
				
  57. 
					57 };
    58. 
				
  58. 
					58 //业务订阅成功后接受服务端推送消息 ，其实是个字符串
    59. 
				
  59. 
					59 ws.onmessage = function (evt) {
    60. 
				
  60. 
					60 console.log('接收到消息' + evt.data);
    61. 
				
  61. 
					61 $("#span").html(evt.data);
    62. 
				
  62. 
					62 // var DATA=JSON.parse(evt.data);
    63. 
				
  63. 
					63 // if (DATA.service=="业务1") {
    64. 
				
  64. 
					64 // console.log("接收业务1的数据");
    65. 
				
  65. 
					65 // //接收业务1的数据，并进行相关逻辑处理
    66. 
				
  66. 
					66 // }
    67. 
				
  67. 
					67 // if (DATA.service=="业务2"){
    68. 
				
  68. 
					68 // console.log("接收业务1的数据");
    69. 
				
  69. 
					69 // //接收业务2的数据，并进行相关逻辑处理
    70. 
				
  70. 
					70 // }
    71. 
				
  71. 
					71 //接收一次后台推送的消息，即进行一次心跳检测重置
    72. 
				
  72. 
					72
    73. 
				
  73. 
					73 heartCheck.reset();
    74. 
				
  74. 
					74 };
    75. 
				
  75. 
					75
    76. 
				
  76. 
					76 };
    77. 
				
  77. 
					77
    78. 
				
  78. 
					78
    79. 
				
  79. 
					79 var webSocketReconnect = function (url) {
    80. 
				
  80. 
					80 console.log("socket 连接断开，正在尝试重新建立连接");
    81. 
				
  81. 
					81 if (lockReconnect) {
    82. 
				
  82. 
					82 return;
    83. 
				
  83. 
					83 }
    84. 
				
  84. 
					84 lockReconnect = true;
    85. 
				
  85. 
					85 //没连接上会一直重连，设置延迟，避免请求过多
    86. 
				
  86. 
					86
    87. 
				
  87. 
					87 //
    88. 
				
  88. 
					88 //s中清楚setTimeout的定时触发设置，之所以加个timer，是为了方便第二次赋值给timer。
    89. 
				
  89. 
					89 // 也就是说直接clearTImeout（timer）则timer就不存在了 再次访问就是error了。
    90. 
				
  90. 
					90 // 而timer&&clearTimeout(timer)则将timer 变成undefined
    91. 
				
  91. 
					91 tt && clearTimeout(tt);
    92. 
				
  92. 
					92 tt = setTimeout(function () {
    93. 
				
  93. 
					93 createWebSocket(url);
    94. 
				
  94. 
					94 }, 4000)
    95. 
				
  95. 
					95 };
    96. 
				
  96. 
					96
    97. 
				
  97. 
					97
    98. 
				
  98. 
					98 //心跳检测 .所谓的心跳检测，就是隔一段时间向服务器仅限一次数据访问，因为长时间不使用会导致ws自动断开，
    99. 
				
  99. 
					99 // 一般是间隔90秒内无操作会自动断开，因此，在间隔时间内进行一次数据访问，以防止ws断开即可，
    100. 
				
  100. 
					100 //这里选择30秒，倒计时30秒内无操作则进行一次访问，有操作则重置计时器
    101. 
				
  101. 
					101 //
    102. 
				
  102. 
					102 //封装为键值对的形式，成为js对象，与json很相似
    103. 
				
  103. 
					103 var heartCheck={
    104. 
				
  104. 
					104 timeout: 30000,//30秒
    105. 
				
  105. 
					105 timeoutObj: null,
    106. 
				
  106. 
					106 reset: function(){//接收成功一次推送，就将心跳检测的倒计时重置为30秒
    107. 
				
  107. 
					107 clearTimeout(this.timeoutObj);//重置倒计时
    108. 
				
  108. 
					108 this.start();
    109. 
				
  109. 
					109 },
    110. 
				
  110. 
					110 start: function(){//启动心跳检测机制，设置倒计时30秒一次
    111. 
				
  111. 
					111 this.timeoutObj = setTimeout(function(){
    112. 
				
  112. 
					112 var message = {
    113. 
				
  113. 
					113 "type": "t10010",
    114. 
				
  114. 
					114 "service":"运行心跳业务一次 =="+ new Date()
    115. 
				
  115. 
					115 };
    116. 
				
  116. 
					116 // JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串
    117. 
				
  117. 
					117 //而JSON.parse()可以将JSON字符串转为一个对象。
    118. 
				
  118. 
					118 console.log("心跳一次");
    119. 
				
  119. 
					119 ws.send(JSON.stringify(message));//启动心跳
    120. 
				
  120. 
					120 },this.timeout)
    121. 
				
  121. 
					121 }
    122. 
				
  122. 
					122 //onopen连接上，就开始start及时，如果在定时时间范围内，onmessage获取到了服务端消息，
    123. 
				
  123. 
					123 // 就重置reset倒计时，距离上次从后端获取消息30秒后，执行心跳检测，看是不是断了。
    124. 
				
  124. 
					124 };
    125. 
				
  125. 
					125
    126. 
				
  126. 
					126 //开始创建webSocket连接
    127. 
				
  127. 
					127 createWebSocket(wsUrl);
    128. 
				
  128. 
					128 ///
    129. 
				
  129. 
					129 function mysend() {
    130. 
				
  130. 
					130 var text = $("#text").val();
    131. 
				
  131. 
					131 console.log("text:" + text);
    132. 
				
  132. 
					132 //向ws发送信息
    133. 
				
  133. 
					133 ws.send(text);
    134. 
				
  134. 
					134
    135. 
				
  135. 
					135 }
    136. 
			

		

	

	

		（3）测试截图

	

		

	

		

	

		3.心得

	

	
    
		
  1. 
			所谓的心跳检测，就是隔一段时间向服务器进行一次数据访问，因为长时间不使用会导致ws自动断开，
    
			一般是间隔90秒内无操作会自动断开，因此，在间隔时间内进行一次数据访问，以防止ws断开即可，
    
			这里选择30秒，倒计时30秒内无操作则进行一次访问，有操作则重置计时器
    
			.PHP实现
    2. 
		
  2. 
			
    
				本文是我在实际工作中用到的Socket通信,关于心跳机制的维护方式,特意总结了一下,希望对朋友们有所帮助. Socket应用:首先Socket 封装了tcp协议的,通过长连接的方式来与服务器通信,是由 ...
    
		
    3. 
		
  3. 
			 
    4.