// 与客户端交互方法列表
|
import wsPlugins from './plugins/index';
|
// const ReWebSocket = require('reconnecting-websocket');
|
// websocket重连
|
import ReWebSocket from '../node_modules/reconnecting-websocket/dist/reconnecting-websocket-cjs';
|
// const Bowser = require('bowser');
|
// 浏览器信息获取
|
import Bowser from "../node_modules/bowser/es5";
|
const browser = Bowser.getParser(window.navigator.userAgent);
|
|
interface callbacks {
|
// 连接客户端状态
|
connectResult: any,
|
// 登录客户端状态
|
loginResult: any
|
}
|
|
|
export default class Ws {
|
[x: string]: any;
|
// 连接地址
|
static url: string = '';
|
// 传入的配置项（方法）
|
static opts: Object = {};
|
// 密码加密公钥
|
static publicKey = '';
|
// 是否连接客户端
|
private isConnectSuccessQt: Boolean = false;
|
// 是否登录客户端
|
private isLoginSuccess: Boolean = false;
|
// 唯一实例
|
private static _instance: any = null;
|
// 当前连接的webSocket
|
webSocket: any;
|
// 最大重连数
|
reConnectCount: number = 3;
|
// 连接失败次数
|
connectFailCount: number = 0;
|
// 重连完成标识
|
connectEnd: Boolean = false;
|
// 登录完成标识
|
loginEnd: Boolean = false;
|
// 最大重登数
|
reLoginCount: number = 1;
|
// 连接失败次数
|
loginFailCount: number = 0;
|
// 当前websocket登录配置
|
config: Object = {};
|
// 登陆IP
|
loginIp: string;
|
// 登陆端口
|
loginPort: string;
|
// 登录用户名
|
userName: string;
|
// 登录密码，密码与token二选一
|
userPwd: string;
|
// 登录token，密码与token二选一
|
token: string;
|
// 用户标识符
|
userCode: Number = 0;
|
// 回调函数
|
private callback: callbacks;
|
// 创建的控件ID列表
|
ids: Array<String> = [];
|
// 创建的控件列表
|
ctrls: Array<String> = [];
|
// 心跳
|
heartBeatTimer: any = null;
|
// 监听的方法表
|
listerns: any;
|
constructor({
|
url= 'ws://localhost:1234',
|
publicKey= 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDbEpPpxpLJft4W9YZj8bRh2bYYZshBEsKOlxgyn11rlEyTasjBSZRV9aj33tvQ2T55izH0fWl+dL/dLZChawFrlGDcH8JuWge2xYMgII9mggcYa0UiQ7pLXJ9ivXZ/cOY3HzrRQdR7dGTSNn3Z0Ctbns6mLgvlA2r3qMNs/8wHBwIDAQAB',
|
reConnectCount = 3,
|
reLoginCount = 1,
|
loginIp= location.hostname,
|
loginPort= location.port,
|
userName = '',
|
userPwd = '',
|
token = '',
|
callback = {
|
connectResult: null,
|
loginResult: null
|
}
|
} : {
|
url: string,
|
publicKey: string,
|
reConnectCount: number,
|
reLoginCount: number,
|
loginIp: string,
|
loginPort: string,
|
userName: string,
|
userPwd: string,
|
token: string
|
callback: callbacks,
|
}) {
|
// if (/https/.test(location.protocol)) {
|
// url = `wss:${url}`;
|
// } else {
|
// url = `ws:${url}`;
|
// }
|
// url = `ws://localhost:1234`;
|
|
this.url = url;
|
this.userCode = new Date().valueOf();
|
this.webSocket = null;
|
this.reConnectCount = reConnectCount;
|
this.reLoginCount = reLoginCount;
|
this.publicKey = publicKey;
|
this.loginIp = loginIp;
|
this.loginPort = loginPort;
|
this.userName = userName;
|
this.userPwd = userPwd;
|
this.token = token;
|
this.callback = callback;
|
|
this.connectFailCount = this.connectFailCount;
|
|
// 基础操作所需功能或属性
|
this.ids = [];
|
this.ctrls = [];
|
|
// 是否连接客户端
|
this.isConnectSuccessQt = false;
|
// 是否登陆客户端
|
this.isLoginSuccess = false;
|
this.heartBeatTimer = null;
|
|
// 初始化配置参数
|
this.initConfig();
|
|
// 连接客户端
|
this.connectQt();
|
|
// 获取与客户端交互方法列表
|
const plugins = [];
|
Object.keys(wsPlugins).forEach(item => {
|
if(hasKey(wsPlugins, item)){
|
plugins.push(wsPlugins[item]);
|
}
|
});
|
// 与客户端通讯功能注册
|
usePlugin(plugins);
|
|
// 用户注册监听事件表
|
this.listerns = new Map();
|
|
// 传入登录配置，则登录
|
if(this.userName) {
|
this.detectConnectQt().then((res: Boolean) => {
|
if(res) {
|
// 登陆客户端
|
this.loginClient();
|
// 心跳保活
|
this._heartbeat();
|
}
|
});
|
}
|
}
|
/**
|
* @description 获得实例对象
|
*/
|
public static getInstance(options: any):Ws {
|
if(!this._instance) {
|
this._instance = new Ws(options);
|
}
|
return this._instance;
|
}
|
/**
|
* @description 用户注册监听事件
|
* @params {String} eventType 事件名称
|
* @params {any} callback 回调函数
|
*/
|
on(eventType: String, callback: any) {
|
this.listerns.set(eventType, callback);
|
}
|
/**
|
* @description 用户取消监听事件
|
* @params {String} eventType 事件名称
|
*/
|
off(eventType: string) {
|
delete this.listerns[eventType];
|
}
|
/**
|
* @description 发送消息给客户端
|
* @params {String} method 事件名称
|
* @params {Object} data 传输消息的数据内容
|
*/
|
emit(method: any, data: { method: any; }) {
|
const { webSocket } = this;
|
data.method = method;
|
// 不需要判断登录和连接的方法过滤
|
let filterList = ['heartbeat', 'login', 'logout', 'browserInfo'];
|
if(filterList.includes(method)) {
|
webSocket.send(JSON.stringify(data));
|
return;
|
}
|
return new Promise((resolve, reject) => {
|
this.detectConnectQt().then(con => {
|
if(con) {
|
this.detectLoginClient().then(login => {
|
if(login) {
|
webSocket.send(JSON.stringify(data));
|
resolve(true);
|
} else {
|
// 登录失败
|
reject(2);
|
}
|
})
|
} else {
|
// 连接失败
|
reject(1);
|
}
|
})
|
})
|
}
|
/*
|
* 初始化配置
|
*/
|
initConfig() {
|
this.config = {
|
userName: this.userName,
|
userCode: this.userCode,
|
loginPort: this.loginPort,
|
loginIp: this.loginIp,
|
userPwd: this.userPwd,
|
token: this.token,
|
};
|
// 浏览器信息
|
const browserInfo = {
|
name: '',
|
version: '',
|
platform: ''
|
};
|
browserInfo.name = browser.getBrowserName().toLowerCase();
|
browserInfo.version = browser.getBrowser().version.toLowerCase();
|
browserInfo.platform =
|
browser._ua.indexOf('Win64') >= 0 || browser._ua.indexOf('Wow64') >= 0
|
? 'win64'
|
: 'win32';
|
this.config['browser'] = browserInfo;
|
}
|
/**
|
* @description 连接客户端
|
*/
|
connectQt() {
|
this.connectEnd = false;
|
// 连接客户端
|
this.webSocket = new ReWebSocket(this.url, '', {
|
maxRetries: this.reConnectCount
|
});
|
this.addEvents();
|
}
|
/**
|
* @description 检测连接客户端状态
|
*/
|
detectConnectQt() {
|
let _this = this;
|
return new Promise((resolve, reject) => {
|
if(!this.connectEnd) { // 连接中
|
let _interval = setInterval(() => {
|
if(_this.connectEnd) {
|
clearInterval(_interval);
|
resolve(_this.isConnectSuccessQt);
|
}
|
}, 50)
|
} else {
|
resolve(_this.isConnectSuccessQt);
|
}
|
})
|
}
|
/**
|
* @description 检测登录客户端状态
|
*/
|
detectLoginClient() {
|
let _this = this;
|
return new Promise((resolve, reject) => {
|
if(!this.loginEnd) { // 连接中
|
let _interval = setInterval(() => {
|
if(_this.loginEnd) {
|
clearInterval(_interval);
|
resolve(_this.isLoginSuccess);
|
}
|
}, 50)
|
} else {
|
resolve(_this.isLoginSuccess);
|
}
|
})
|
}
|
/**
|
* @description 登录客户端
|
* @params {Object} config 登录相关配置
|
*/
|
login(config: Object) {
|
this.loginEnd = false;
|
Object.assign(this.config, config);
|
// 未连接客户端
|
if(!this.isOpen()) {
|
// 连接失败
|
return false
|
} else {
|
// 若已登录，先注销
|
if (this.isLoginSuccess) {
|
this.logout();
|
}
|
// 登陆客户端
|
this.loginClient();
|
// 心跳保活
|
this._heartbeat();
|
}
|
}
|
/**
|
* @description 连接客户端完成后登陆
|
*/
|
// loginAfterConnectEnd() {
|
// // 未连接客户端
|
// if(!this.isOpen()) {
|
// // 连接失败
|
// return false
|
// } else {
|
// // 若已登录，先注销
|
// if (this.isLoginSuccess) {
|
// this.logout();
|
// }
|
// // 登陆客户端
|
// this.loginClient();
|
// // 心跳保活
|
// this._heartbeat();
|
// }
|
// }
|
/**
|
* @description 登出客户端
|
*/
|
logout() {
|
// 退出客户端
|
this.logoutClient();
|
this.isLoginSuccess = false;
|
if (typeof this.callback.loginResult === 'function') {
|
this.callback.loginResult.call(this, this.isLoginSuccess);
|
}
|
}
|
/**
|
* @description 添加websocket/window监听事件
|
*/
|
addEvents() {
|
const webSocket = this.webSocket;
|
webSocket.addEventListener('open', () => this.onOpen());
|
webSocket.addEventListener('message', (e: any) => this.onMessage(e));
|
webSocket.addEventListener('error', () => this.onError());
|
window.addEventListener('resize', () => this.reLocatedPosition());
|
window.addEventListener('scroll', () => this.reLocatedPosition());
|
}
|
/**
|
* @description 移除websocket/window监听事件
|
*/
|
removeEvents() {
|
const webSocket = this.webSocket;
|
webSocket.removeEventListener('open', this.onOpen);
|
webSocket.removeEventListener('message', this.onMessage);
|
webSocket.removeEventListener('error', this.onError);
|
webSocket.removeEventListener('resize', this.reLocatedPosition);
|
webSocket.removeEventListener('scroll', this.reLocatedPosition);
|
}
|
/**
|
* @description 连接客户端成功事件
|
*/
|
onOpen() {
|
this.isConnectSuccessQt = true;
|
this.connectEnd = true;
|
if (typeof this.callback.connectResult === 'function') {
|
this.callback.connectResult.call(this, this.isConnectSuccessQt);
|
}
|
}
|
/**
|
* @description 接收客户端消息
|
* @params {Object} event 接收客户端的消息数据
|
*/
|
onMessage(event: { data: string; }) {
|
try {
|
const data = JSON.parse(event.data);
|
const { method } = data;
|
const callback = this.listerns.get(method);
|
if (method === 'loginState') {
|
this.loginFailCount ++;
|
if(this.loginFailCount < this.reLoginCount + 1) { // 登录未到最大次数
|
if(data.params.loginResult === 0) { // 登录成功
|
this.isLoginSuccess = data.params.loginResult === 0;
|
if (typeof this.callback.loginResult === 'function') {
|
this.callback.loginResult.call(this, this.isLoginSuccess);
|
}
|
} else { // 登录失败
|
this.loginClient();
|
}
|
} else { // 登录达到最大次数
|
this.loginEnd = true;
|
this.isLoginSuccess = data.params.loginResult === 0;
|
if (typeof this.callback.loginResult === 'function') {
|
this.callback.loginResult.call(this, this.isLoginSuccess);
|
}
|
}
|
}
|
if (callback) {
|
if (method === 'loginState') {
|
callback(this.isLoginSuccess);
|
} else if (method === 'createCtrlResult') {
|
callback(data.params.array);
|
} else {
|
callback(data);
|
}
|
}
|
} catch (e) {
|
// console.error('error', e);
|
}
|
}
|
/**
|
* @description 客户端发生错误事件
|
*/
|
onError() {
|
this.isConnectSuccessQt = false;
|
clearTimeout(this.heartbeatTimer);
|
this.connectFailCount ++;
|
if(this.connectFailCount === this.reConnectCount + 1) {
|
this.connectEnd = true;
|
if (typeof this.callback.connectResult === 'function') {
|
this.callback.connectResult.call(this, this.isConnectSuccessQt);
|
}
|
}
|
}
|
/**
|
* @description 判断是否成功连接客户端
|
*/
|
isOpen() {
|
if (!this.webSocket) return false;
|
return this.webSocket.readyState === 1;
|
}
|
/**
|
* @description 心跳事件
|
*/
|
_heartbeat() {
|
this.heartbeat();
|
clearTimeout(this.heartbeatTimer);
|
this.heartbeatTimer = setTimeout(() => {
|
this._heartbeat();
|
}, 10000);
|
}
|
/**
|
* @description 获取当前浏览器缩放和滚动条信息
|
*/
|
getScrollInfo() {
|
let ratio = detectZoom();
|
let scrollX = window.pageXOffset;
|
let scrollY = window.pageYOffset;
|
var hasscrollbary = hasScrollbarY();
|
var hasscrollbarx = hasScrollbarX();
|
var scrollbarWidth = getScrollbarWidth();
|
let scrollXH = hasscrollbarx ? scrollbarWidth : 0;
|
let scrollYW = hasscrollbary ? scrollbarWidth : 0;
|
return { ratio, scrollX, scrollY, scrollXH, scrollYW };
|
}
|
}
|
|
function promisify(func: Function) {
|
return new Promise((resolve, reject) => {
|
func('1', (data) => resolve(data))
|
})
|
}
|
|
/**
|
* @description 判断对象是否含有某属性
|
* @params {Object} obj 对象
|
* @params {String} key 属性key
|
*/
|
function hasKey<O>(obj: O, key: keyof any): key is keyof O {
|
return key in obj
|
}
|
|
/**
|
* @description 与客户端通讯功能注册
|
* @params {Array} plugins 功能列表
|
*/
|
function usePlugin(plugins: any[]) {
|
plugins.forEach((plugin) => {
|
Object.getOwnPropertyNames(plugin).forEach(prop => {
|
Ws.prototype[prop] = plugin[prop];
|
});
|
});
|
}
|
|
function detectZoom() {
|
var ratio = 0,
|
screen = window.screen,
|
ua = navigator.userAgent.toLowerCase();
|
|
if (window.devicePixelRatio !== undefined) {
|
ratio = window.devicePixelRatio;
|
} else if (~ua.indexOf('msie')) {
|
if (screen['deviceXDPI'] && screen['logicalXDPI']) {
|
ratio = screen['deviceXDPI'] / screen['logicalXDPI'];
|
}
|
} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
|
ratio = window.outerWidth / window.innerWidth;
|
}
|
|
if (ratio) {
|
ratio = Math.round(ratio * 100);
|
}
|
return ratio;
|
}
|
|
function hasScrollbarY() {
|
return (
|
document.body.scrollHeight >
|
(window.innerHeight || document.documentElement.clientHeight)
|
);
|
}
|
|
function hasScrollbarX() {
|
return (
|
document.body.scrollWidth >
|
(window.innerWidth || document.documentElement.clientWidth)
|
);
|
}
|
|
function getScrollbarWidth() {
|
var scrollDiv = document.createElement('div');
|
scrollDiv.style.cssText =
|
'width: 99px; height: 99px; overflow: scroll; position: absolute; top: -9999px;';
|
document.body.appendChild(scrollDiv);
|
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
document.body.removeChild(scrollDiv);
|
|
return scrollbarWidth;
|
}
|
