(精华)2020年7月19日 vue 实时通信websocket的封装
【摘要】
import webSocket from '../webSocket.js';
export default {
isIosAndroid() {
var u = navigator.use...
import webSocket from '../webSocket.js';
export default {
isIosAndroid() {
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
isChrome = u.indexOf('Safari'); //浏览器端
return {
isAndroid,
isiOS,
isChrome
}
},
websocktSend(paramsObj) {
// this --> store
//这个是用来向后端websocket发送信息，发送之前需要先判断是否还处理链接状态
var userId = localStorage.getItem('userId');
var sendMsg = () => {
window.socketServer.send(JSON.stringify(paramsObj)); //给后端发送信息
}
if (window.socketServer.readyState == 1) {
sendMsg();
} else {
// 这里的this是$store,传递进来的
// 这个this你并不知道
webSocket.call(this, wsconPath[sceneParam] + userId).then(() => {
sendMsg();
});
}
},
// 时间显示的几分钟、几小时、当天、昨天、前天以及更早的具体时间
// 2019-12-07 09:58:23
// JS计算两个日期时间差，天 小时 分 秒格式
showDiffTime: function (startDate) {
if (!startDate) {
return;
}
var startDate = startDate.replace(new RegExp(/-/gm), "/");
var startDateB = new Date(startDate);
var updateHour = startDateB.getHours(),
updateMin = startDateB.getMinutes();
updateHour = updateHour < 10 ? '0' + updateHour : updateHour;
updateMin = updateMin < 10 ? '0' + updateMin : updateMin;
var endDate = new Date(); //现在的时间
var diff = endDate.getTime() - startDateB.getTime(); //时间差的毫秒数
//计算出相差天数
var days = Math.floor(diff / (24 * 3600 * 1000));
// 1.当天，显示：HH:MM
// 2.昨天，显示：昨天 HH:MM
// 3.前天，显示：前天 HH:MM
// 4.更早，显示：****年**月**日 HH:MM
if (days > 0) {
if (days == 1) {
return "昨天 " + updateHour + ':' + updateMin;
}
if (days == 2) {
return "前天 " + updateHour + ':' + updateMin;
}
if (days > 2) {
return startDate.split(' ')[0] + ' ' + updateHour + ':' + updateMin;
}
}
if (days == 0) {
return updateHour + ':' + updateMin;
}
},
// 像scroll，resize，keyup scroll等事件频繁触发会引发页面的抖动甚至卡顿
debounce(fn, delay) {
delay = delay || 200;
var timer = null;
return function () {
var arg = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(this, arg);
}, delay);
}
},
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
//心跳检测
var heartCheck = {
timeout: 3000, //每隔三秒发送心跳
// num: 3, //3次心跳均未响应重连
timeoutObj: null,
reset: function(){//接收成功一次推送，就将心跳检测的倒计时重置为30秒
clearTimeout(this.timeoutObj);//重置倒计时
this.start();
},
start: function(){
//启动心跳检测机制，设置倒计时30秒一次
this.timeoutObj = setTimeout(function(){
//这里发送一个心跳，后端收到后，返回一个心跳消息，
//onmessage拿到返回的心跳就说明连接正常
var userId = localStorage.getItem('userId');
if(!userId){
return;
}
window.socketServer.send(JSON.stringify({
photographerObjectId:'',
type:'6',
leavingContent:'',
photographerId:userId //留言摄影师编号
})); //给后端发送信息
},this.timeout)
}
//onopen连接上，就开始start及时，如果在定时时间范围内，onmessage获取到了服务端消息，
//就重置reset倒计时，距离上次从后端获取消息30秒后，执行心跳检测，看是不是断了。
}
/**建立连接 */
function createWSConnect(path){
var _store = this;
if (typeof WebSocket === "undefined") {
alert("您的浏览器不支持socket");
} else {
return new Promise((resolve,reject)=>{
// 实例化socket
var socket = new WebSocket(path);
// 监听socket连接
socket.onopen = function(){
console.log("socket连接成功!!!");
window.socketServer = socket;
resolve(socket);
//要不要把socket存放在store呢，看自己
//心跳检测启动
heartCheck.start();
};
socket.onclose = function (e) {
console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
console.log(e);
reconnect(path);
}
// 监听socket错误信息
socket.onerror = function(){
socket.close();
reject();
console.log("连接错误");
reconnect(path);
};
// 监听socket消息，后端给到前端的数据
socket.onmessage = function(res){
if(res.data==1){
//检测心跳
heartCheck.reset();
return;
}
var data = res.data && JSON.parse(res.data);
// _store.dispatch('UpdateChatBadge',{count:data.count})
updateMsgForType.call(_store,data);
};
})
}
}
//重新建立链接
reconnect.lockReconnect = false;//避免重复连接
reconnect.timer = '';
function reconnect(url) {
if (reconnect.lockReconnect) return;
reconnect.lockReconnect = true;
reconnect.timer && clearTimeout(reconnect.timer);
//没连接上会一直重连，设置延迟避免请求过多
reconnect.timer = setTimeout(function () {
createWSConnect(url);
reconnect.lockReconnect = false;
}, 4000);
}
function updateMsgForType(data){
if(data.error){
this.$Toast(data.error);
return;
}
this.dispatch('UpdateChatBadge',{count:data.count})
switch(data.type){
case '0': // 0 一对一交流文字
this.dispatch('communication/addOneToOne',data.siteComm)
break;
case '1': //1 一对一交流图片
this.dispatch('communication/addOneToOne',data.siteComm)
break;
case '2': //2 未读总条数
break;
case '3': //撤回被删除的信息
this.dispatch('communication/withdrawOneToOne',{count:data.siteComm})
break;
case '4': //单条代表删除一对一信息
this.dispatch('communication/delOneToOne',data.siteComm)
break;
case '5': //批量删除一对一信息
this.dispatch('communication/delAllOneToOne',data.siteComm)
break;
}
}
export default createWSConnect;
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
utils.websocktSend.call(this.$store, paramsObj);
- 1
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/107448747
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）