关于webSocket建立前后端连接，并进行心跳机制的实现

最近在做一个后台实时通知的项目，项目中用到了socket来实现前后端建立通信，在此记录一下。

<template>    <div>       <h1>测试webSocket</h1><div id ="aaa" style="height: 300px; overflow-y: scroll; background: #333; color: #aaa; padding: 10px;"></div></div>
</template>
<script>var that;
export default {data(){return {data:0,timeout: 30 * 1000,//30秒一次心跳timeoutObj: null,//心跳心跳倒计时serverTimeoutObj: null,//心跳倒计时timeoutnum: null,//断开 重连倒计时websocket: null,}},created() { // 页面创建生命周期函数  that = this;that.initWebSocket()},        destroyed: function () { // 离开页面生命周期函数              that.websocketclose();},        methods: {            initWebSocket: function () {                // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https                that.websocket = new WebSocket("wss://127.0.0.1:9231/kh_snmptrap/websocket/lsmsp");that.websocket.onopen = that.websocketonopen;that.websocket.onerror = that.websocketonerror;that.websocket.onmessage = that.setOnmessageMessage;that.websocket.onclose = that.websocketclose;// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。// window.onbeforeunload = that.onbeforeunload},reconnect: function () { // 重新连接if(that.lockReconnect) return;that.lockReconnect = true;//没连接上会一直重连，设置延迟避免请求过多that.timeoutnum && clearTimeout(that.timeoutnum);that.timeoutnum = setTimeout(() => {//新连接that.initWebSocket();that.lockReconnect = false;}, 5000);},reset: function () { // 重置心跳// 清除时间clearTimeout(that.timeoutObj);clearTimeout(that.serverTimeoutObj);// 重启心跳that.start();},start: function () { // 开启心跳that.timeoutObj && clearTimeout(that.timeoutObj);that.serverTimeoutObj && clearTimeout(that.serverTimeoutObj);that.timeoutObj = setTimeout(() => {// 这里发送一个心跳，后端收到后，返回一个心跳消息，if (that.websocket && that.websocket.readyState == 1) { // 如果连接正常that.websocketsend('heartbeat');} else { // 否则重连that.reconnect();}that.serverTimeoutObj = setTimeout(() => {//超时关闭that.websocket.close();}, that.timeout);}, that.timeout)},setOnmessageMessage: function(event) {let obj = JSON.parse(event.data);// console.log("obj",obj)switch(obj.type) {case 'heartbeat'://收到服务器信息，心跳重置that.reset();break;case 'sendMessage':that.data = obj.dataconsole.log("接收到的服务器消息：",JSON.stringify(obj.data,null,4))document.getElementById('aaa').innerHTML=JSON.stringify(obj.data,null,4)}},websocketonopen: function () {//开启心跳that.start();console.log("WebSocket连接成功!!!"+new Date()+"----"+that.websocket.readyState);},              websocketonerror: function (e) {                console.log("WebSocket连接发生错误" + e);              },              websocketonmessage: function (e) {                console.log(e.data);                // console.log(e);document.getElementById('aaa').innerHTML=e.data},websocketclose: function (e) {that.websocket.close();console.log("connection closed ");},websocketsend(messsage) {that.websocket.send(messsage)},closeWebSocket() { // 关闭websocketthat.websocket.close()}}
}
</script>
<style >
</style>

还有一点，我这里是https的请求，如果你是http请求的话，把wss://127.0.0.1:8888改为ws://127.0.0.1:8888。

关于webSocket建立前后端连接，并进行心跳机制的实现相关推荐

java web 心跳机制实现,基于javax的websocket服务端实现，含心跳机制
websocket连接类 package com.dnn.controller.inter; import java.io.IOException; import java.text.SimpleDa ...
vue websocket 建立连接并添加心跳检测机制
图片: 代码: 新建一个文件夹,里面有两个文件组件1: index.js import Bus from './bus.js'var websocketConnectdCount = 0export ...
html5 长链接,Vue通过WebSocket建立长连接，连接
Vue通过WebSocket建立长连接,连接使用场景: 在项目开发中,后端需要处理一连串的逻辑,或者等待第三方的数据返回来进行处理之后在返回给前端,可能时间会很长,而且前端也不知道后端什么时候能处理 ...
socket服务器断开消息,详解JS WebSocket断开原因和心跳机制
1.断开原因 WebSocket断开的原因有很多,最好在WebSocket断开时,将错误打印出来. ws.onclose = function (e) { console.log('websocket ...
WebSocket的心跳机制和断线重连
背景在服务器重启或是弱网情况下,前端不能保证一直连接成功.因此在出现被动断开的情况下,需要有心跳机制和断线重连的功能. 心跳机制:客户端每隔一段时间向服务端发送一个特有的心跳消息,每次服务端收到消息 ...
websocket 心跳机制
WebSocket 是一种在客户端和服务器之间创建持久连接的技术.为了保持连接的稳定性,就需要通过发送心跳消息来维持 WebSocket 连接. 1.创建一个webscoket基本的使用 // 创建 ...
WebSocket心跳机制
目录 1 WebSocket简介 2 WebSocket事件与方法 2.1 创建WebSocket实例 2.2 WebSocket 事件 2.3 WebSocket 方法 3 WebSocket的心跳 ...
springboot心跳检测_springboot websocket 实时刷新添加心跳机制（亲测可用版）
思路在我之前的一篇文章当中写到了websocket的实时刷新,但是有个问题没有解决,就是长时间没有数据的时候,这个连接就会自动断开,然后再次进行连接的话,需要再次进行连接.如果加入心跳机制的话,10 ...
php 如何实现心跳包,Socket心跳机制-JS+PHP实现
本文是我在实际工作中用到的Socket通信,关于心跳机制的维护方式,特意总结了一下,希望对朋友们有所帮助. Socket应用:首先Socket 封装了tcp协议的,通过长连接的方式来与服务器通信,是由 ...

关于webSocket建立前后端连接，并进行心跳机制的实现

关于webSocket建立前后端连接，并进行心跳机制的实现相关推荐

最新文章

热门文章