291 lines
9.9 KiB
JavaScript
291 lines
9.9 KiB
JavaScript
/**
|
||
* Gdoo Realtime 连接库
|
||
*
|
||
* 参考自：https://github.com/joewalnes/reconnecting-websocket/
|
||
*
|
||
* 使用方法
|
||
* ======
|
||
* 选项可以在实例化时传递，也可以在实例化后设置：
|
||
* var socket = new Realtime({url: '127.0.0.1', debug: true, reconnectInterval: 4000});
|
||
* 或者
|
||
* var socket = new Realtime();
|
||
* socket.url = '';
|
||
* socket.debug = true;
|
||
* socket.reconnectInterval = 4000;
|
||
*/
|
||
(function (global, factory) {
|
||
if (typeof define === 'function' && define.amd) {
|
||
define([], factory);
|
||
} else if (typeof module !== 'undefined' && module.exports){
|
||
module.exports = factory();
|
||
} else {
|
||
global.Realtime = factory();
|
||
}
|
||
})(this, function () {
|
||
|
||
if (!('WebSocket' in window)) {
|
||
return;
|
||
}
|
||
|
||
function Realtime(appKey, options) {
|
||
// 默认设置
|
||
var settings = {
|
||
// 连接ws服务器地址
|
||
host: null,
|
||
// 连接服务器认证的url
|
||
authEndpoint: '/realtime/auth',
|
||
// 认证参数
|
||
auth: {params:{}, headers:{}},
|
||
// 此实例是否应记录调试消息
|
||
debug: false,
|
||
// WebSocket是否应在实例化后立即尝试连接
|
||
automaticOpen: true,
|
||
// 尝试重新连接之前要延迟的毫秒数
|
||
reconnectInterval: 1000,
|
||
// 延迟重新连接尝试的最大毫秒数
|
||
maxReconnectInterval: 30000,
|
||
// The rate of increase of the reconnect delay. Allows reconnect attempts to back off when problems persist.
|
||
reconnectDecay: 1.5,
|
||
// The maximum time in milliseconds to wait for a connection to succeed before closing and retrying.
|
||
timeoutInterval: 2000,
|
||
// The maximum number of reconnection attempts to make. Unlimited if null. */
|
||
maxReconnectAttempts: null,
|
||
// The binary type, possible values 'blob' or 'arraybuffer', default 'blob'. */
|
||
binaryType: 'blob',
|
||
// websocket子协议定义
|
||
protocols: [],
|
||
// 当前连接Id
|
||
socket_id: null,
|
||
}
|
||
if (!options) { options = {}; }
|
||
|
||
// Overwrite and define settings with options if they exist.
|
||
for (var key in settings) {
|
||
if (typeof options[key] == 'undefined') {
|
||
this[key] = settings[key];
|
||
} else {
|
||
this[key] = options[key];
|
||
}
|
||
}
|
||
|
||
/** The number of attempted reconnects since starting, or the last successful connection. Read only. */
|
||
this.reconnectAttempts = 0;
|
||
|
||
/**
|
||
* The current state of the connection.
|
||
* Can be one of: WebSocket.CONNECTING, WebSocket.OPEN, WebSocket.CLOSING, WebSocket.CLOSED
|
||
* Read only.
|
||
*/
|
||
this.readyState = WebSocket.CONNECTING;
|
||
|
||
/**
|
||
* A string indicating the name of the sub-protocol the server selected; this will be one of
|
||
* the strings specified in the protocols parameter when creating the WebSocket object.
|
||
* Read only.
|
||
*/
|
||
this.protocol = null;
|
||
|
||
// 私有变量
|
||
var me = this;
|
||
var ws;
|
||
var forcedClose = false;
|
||
var timedOut = false;
|
||
|
||
var handlers = {};
|
||
|
||
handlers.connect = function(data) {};
|
||
handlers.disconnect = function(data) {};
|
||
handlers.reconnecting = function(data) {};
|
||
handlers.quit = function(data) {};
|
||
handlers.error = function(data) {};
|
||
|
||
this.on = function(name, fun) {
|
||
handlers[name] = fun;
|
||
return me;
|
||
}
|
||
|
||
var channel = function(channel_name) {
|
||
var that = this;
|
||
this.channel_name = channel_name;
|
||
this.members = {};
|
||
this.on = function(event_name, callback) {
|
||
handlers[that.channel_name + '.' + event_name] = callback;
|
||
return that;
|
||
}
|
||
this.emit = function(event_name, data) {
|
||
return me.emit(that.channel_name, event_name, data);
|
||
}
|
||
}
|
||
|
||
this.subscribe = function(channel_name) {
|
||
return new channel(channel_name);
|
||
}
|
||
|
||
this.authorize = function() {
|
||
$.ajax({
|
||
url: me.authEndpoint,
|
||
type: 'POST',
|
||
data: me.auth['params'],
|
||
beforeSend: function(req) {
|
||
headers = me.auth['headers'];
|
||
for (var key in headers) {
|
||
req.setRequestHeader(key, headers[key]);
|
||
}
|
||
},
|
||
dataType: 'json',
|
||
success: function (data) {
|
||
me.send({channel:'socket', event:'authorize', data:data});
|
||
}
|
||
});
|
||
}
|
||
|
||
this.connect = function (reconnectAttempt) {
|
||
ws = new WebSocket(me.host + '?key=' + appKey, me.protocols);
|
||
ws.binaryType = this.binaryType;
|
||
|
||
if (reconnectAttempt) {
|
||
if (this.maxReconnectAttempts && this.reconnectAttempts > this.maxReconnectAttempts) {
|
||
return;
|
||
}
|
||
} else {
|
||
handlers.reconnecting.call(me);
|
||
this.reconnectAttempts = 0;
|
||
}
|
||
|
||
if (me.debug || Realtime.debugAll) {
|
||
console.log('realtime', 'attempt-connect', me.host);
|
||
}
|
||
|
||
var localWs = ws;
|
||
var timeout = setTimeout(function() {
|
||
if (me.debug || Realtime.debugAll) {
|
||
console.log('realtime', 'connection-timeout', me.host);
|
||
}
|
||
timedOut = true;
|
||
localWs.close();
|
||
timedOut = false;
|
||
}, me.timeoutInterval);
|
||
|
||
ws.onopen = function(event) {
|
||
clearTimeout(timeout);
|
||
if (me.debug || Realtime.debugAll) {
|
||
console.log('realtime', 'onopen', me.host);
|
||
}
|
||
me.protocol = ws.protocol;
|
||
me.readyState = WebSocket.OPEN;
|
||
me.reconnectAttempts = 0;
|
||
|
||
handlers.connect.call(me);
|
||
|
||
reconnectAttempt = false;
|
||
};
|
||
|
||
ws.onclose = function(event) {
|
||
clearTimeout(timeout);
|
||
ws = null;
|
||
if (forcedClose) {
|
||
me.readyState = WebSocket.CLOSED;
|
||
handlers.disconnect.call(me, event);
|
||
} else {
|
||
me.readyState = WebSocket.CONNECTING;
|
||
handlers.reconnecting.call(me, event);
|
||
|
||
if (!reconnectAttempt && !timedOut) {
|
||
if (me.debug || Realtime.debugAll) {
|
||
console.log('realtime', 'onclose', me.host);
|
||
}
|
||
handlers.disconnect.call(me, event);
|
||
}
|
||
|
||
var timeout = me.reconnectInterval * Math.pow(me.reconnectDecay, me.reconnectAttempts);
|
||
setTimeout(function() {
|
||
me.reconnectAttempts++;
|
||
me.connect(true);
|
||
}, timeout > me.maxReconnectInterval ? me.maxReconnectInterval : timeout);
|
||
}
|
||
};
|
||
|
||
ws.onmessage = function(event) {
|
||
if (me.debug || Realtime.debugAll) {
|
||
console.log('realtime', 'onmessage', me.host, event.data);
|
||
}
|
||
var packet = JSON.parse(event.data);
|
||
|
||
var channel_name = packet['channel'];
|
||
var event_name = packet['event'];
|
||
var data = packet['data'];
|
||
var key = channel_name == 'socket' ? event_name : channel_name + '.' + event_name;
|
||
var handler = handlers[key];
|
||
|
||
// 连接成功事件
|
||
if (key == 'connected') {
|
||
me.socket_Id = data.socket_Id;
|
||
me.authorize();
|
||
}
|
||
if (typeof handler == 'function') {
|
||
handler.call(me, data, packet);
|
||
}
|
||
};
|
||
|
||
ws.onerror = function(event) {
|
||
if (me.debug || Realtime.debugAll) {
|
||
console.log('realtime', 'onerror', me.host, event);
|
||
}
|
||
handlers.error.call(me, event);
|
||
};
|
||
}
|
||
|
||
// 是否在实例化时创建WebSocket
|
||
if (this.automaticOpen == true) {
|
||
this.connect(false);
|
||
}
|
||
|
||
/**
|
||
* 通过WebSocket连接将数据传输到服务器。
|
||
* @param channel 频道名称
|
||
* @param data 要发送到服务器的文本字符串、arrayBuffer或blob。
|
||
*/
|
||
this.emit = function(channel_name, event_name, data) {
|
||
return this.send({channel:channel_name, event:event_name, data:data});
|
||
};
|
||
|
||
this.send = function(data) {
|
||
if (ws) {
|
||
if (me.debug || Realtime.debugAll) {
|
||
console.log('realtime', 'send', me.host, data.data);
|
||
}
|
||
return ws.send(JSON.stringify(data));
|
||
} else {
|
||
throw 'INVALID_STATE_ERR : Pausing to reconnect websocket';
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 关闭WebSocket连接或连接尝试。
|
||
* 如果连接已关闭，则此方法不执行任何操作。
|
||
*/
|
||
this.disconnect = function(code, reason) {
|
||
// Default CLOSE_NORMAL code
|
||
if (typeof code == 'undefined') {
|
||
code = 1000;
|
||
}
|
||
forcedClose = true;
|
||
if (ws) {
|
||
ws.close(code, reason);
|
||
}
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 将此设置为true等同于将 Realtime.log 的所有实例设置为true。
|
||
*/
|
||
Realtime.debugAll = false;
|
||
|
||
Realtime.CONNECTING = WebSocket.CONNECTING;
|
||
Realtime.OPEN = WebSocket.OPEN;
|
||
Realtime.CLOSING = WebSocket.CLOSING;
|
||
Realtime.CLOSED = WebSocket.CLOSED;
|
||
|
||
return Realtime;
|
||
});
|