chat client: make host part of the config options

I think that this its a better idea to populate the host field on the server instead of guessing it on the client because guessing it on the client is quite fragile: it only works when the webmaster includes our script the way we tell them to. If that doesn't fit into their workflow (e.g. they want to concatinate all javascript files, they want to load it asynchronously) our functionality will break.
This commit is contained in:
Felix Niklas 2015-11-13 10:45:40 +01:00
parent 59c6fce8df
commit 57941a83a6
3 changed files with 45 additions and 22 deletions

View file

@ -8,6 +8,7 @@ do($ = window.jQuery, window) ->
agentPhrase: ' is helping you' agentPhrase: ' is helping you'
show: true show: true
target: $('body') target: $('body')
host: 'ws://localhost:6042'
_messageCount: 0 _messageCount: 0
isOpen: false isOpen: false
@ -19,9 +20,8 @@ do($ = window.jQuery, window) ->
inputTimeout: null inputTimeout: null
isTyping: false isTyping: false
isOnline: true isOnline: true
initialQueueDelay: 10000, initialQueueDelay: 10000
debug: true debug: true
host: 'ws://localhost:6042'
wsReconnectEnable: true wsReconnectEnable: true
strings: strings:
'Online': 'Online' 'Online': 'Online'
@ -395,8 +395,8 @@ do($ = window.jQuery, window) ->
@send('chat_session_init') @send('chat_session_init')
wsConnect: => wsConnect: =>
@log 'notice', "Connecting to #{@host}" @log 'notice', "Connecting to #{@options.host}"
@ws = new window.WebSocket(@host) @ws = new window.WebSocket(@options.host)
@ws.onopen = @onWebSocketOpen @ws.onopen = @onWebSocketOpen
@ws.onmessage = @onWebSocketMessage @ws.onmessage = @onWebSocketMessage

View file

@ -8,7 +8,8 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
invitationPhrase: '<strong>Chat</strong> with us!', invitationPhrase: '<strong>Chat</strong> with us!',
agentPhrase: ' is helping you', agentPhrase: ' is helping you',
show: true, show: true,
target: $('body') target: $('body'),
host: 'ws://localhost:6042'
}; };
ZammadChat.prototype._messageCount = 0; ZammadChat.prototype._messageCount = 0;
@ -35,7 +36,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.debug = true; ZammadChat.prototype.debug = true;
ZammadChat.prototype.host = 'ws://localhost:6042'; ZammadChat.prototype.wsReconnectEnable = true;
ZammadChat.prototype.strings = { ZammadChat.prototype.strings = {
'Online': 'Online', 'Online': 'Online',
@ -98,7 +99,9 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.onConnectionReestablished = bind(this.onConnectionReestablished, this); this.onConnectionReestablished = bind(this.onConnectionReestablished, this);
this.reconnect = bind(this.reconnect, this); this.reconnect = bind(this.reconnect, this);
this.onWebSocketOpen = bind(this.onWebSocketOpen, this); this.onWebSocketOpen = bind(this.onWebSocketOpen, this);
this.connect = bind(this.connect, this); this.wsReconnect = bind(this.wsReconnect, this);
this.wsClose = bind(this.wsClose, this);
this.wsConnect = bind(this.wsConnect, this);
this.onAgentTypingEnd = bind(this.onAgentTypingEnd, this); this.onAgentTypingEnd = bind(this.onAgentTypingEnd, this);
this.onAgentTypingStart = bind(this.onAgentTypingStart, this); this.onAgentTypingStart = bind(this.onAgentTypingStart, this);
this.onQueue = bind(this.onQueue, this); this.onQueue = bind(this.onQueue, this);
@ -140,7 +143,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.log('notice', 'Chat: Browser not supported!'); this.log('notice', 'Chat: Browser not supported!');
return; return;
} }
this.connect(); this.wsConnect();
} }
ZammadChat.prototype.checkForEnter = function(event) { ZammadChat.prototype.checkForEnter = function(event) {
@ -194,17 +197,21 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
case 'chat_status_customer': case 'chat_status_customer':
switch (pipe.data.state) { switch (pipe.data.state) {
case 'online': case 'online':
this.sessionId = void 0;
this.onReady(); this.onReady();
this.log('debug', 'Zammad Chat: ready'); this.log('debug', 'Zammad Chat: ready');
break; break;
case 'offline': case 'offline':
this.log('debug', 'Zammad Chat: No agent online'); this.log('debug', 'Zammad Chat: No agent online');
this.wsClose();
break; break;
case 'chat_disabled': case 'chat_disabled':
this.log('debug', 'Zammad Chat: Chat is disabled'); this.log('debug', 'Zammad Chat: Chat is disabled');
this.wsClose();
break; break;
case 'no_seats_available': case 'no_seats_available':
this.log('debug', 'Zammad Chat: Too many clients in queue. Clients in queue: ', pipe.data.queue); this.log('debug', 'Zammad Chat: Too many clients in queue. Clients in queue: ', pipe.data.queue);
this.wsClose();
break; break;
case 'reconnect': case 'reconnect':
this.log('debug', 'old messages', pipe.data.session); this.log('debug', 'old messages', pipe.data.session);
@ -338,19 +345,24 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.el.css('bottom', 0); this.el.css('bottom', 0);
this.onOpenAnimationEnd(); this.onOpenAnimationEnd();
} }
return this.isOpen = true; this.isOpen = true;
};
ZammadChat.prototype.onOpenAnimationEnd = function() {
if (!this.sessionId) { if (!this.sessionId) {
return this.session_init(); return this.session_init();
} }
}; };
ZammadChat.prototype.onOpenAnimationEnd = function() {};
ZammadChat.prototype.close = function(event) { ZammadChat.prototype.close = function(event) {
if (event) { if (event) {
event.stopPropagation(); event.stopPropagation();
} }
if (!this.sessionId) {
return;
}
if (this.onInitialQueueDelayId) {
clearTimeout(this.onInitialQueueDelayId);
}
sessionStorage.removeItem('sessionId'); sessionStorage.removeItem('sessionId');
sessionStorage.removeItem('unfinished_message'); sessionStorage.removeItem('unfinished_message');
return this.closeWindow(); return this.closeWindow();
@ -400,6 +412,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.onQueueScreen = function(data) { ZammadChat.prototype.onQueueScreen = function(data) {
var show; var show;
this.setSessionId(data.session_id);
show = (function(_this) { show = (function(_this) {
return function() { return function() {
return _this.onQueue(data); return _this.onQueue(data);
@ -418,7 +431,6 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
ZammadChat.prototype.onQueue = function(data) { ZammadChat.prototype.onQueue = function(data) {
this.log('notice', 'onQueue', data.position); this.log('notice', 'onQueue', data.position);
this.inQueue = true; this.inQueue = true;
this.setSessionId(data.session_id);
return this.el.find('.zammad-chat-body').html(this.view('waiting')({ return this.el.find('.zammad-chat-body').html(this.view('waiting')({
position: data.position position: data.position
})); }));
@ -485,15 +497,17 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
return this.send('chat_session_init'); return this.send('chat_session_init');
}; };
ZammadChat.prototype.connect = function() { ZammadChat.prototype.wsConnect = function() {
this.log('notice', "Connecting to " + this.host); this.log('notice', "Connecting to " + this.options.host);
this.ws = new window.WebSocket(this.host); this.ws = new window.WebSocket(this.options.host);
this.ws.onopen = this.onWebSocketOpen; this.ws.onopen = this.onWebSocketOpen;
this.ws.onmessage = this.onWebSocketMessage; this.ws.onmessage = this.onWebSocketMessage;
this.ws.onclose = (function(_this) { this.ws.onclose = (function(_this) {
return function(e) { return function(e) {
_this.log('debug', 'close websocket connection'); _this.log('debug', 'close websocket connection');
_this.reconnect(); if (_this.wsReconnectEnable) {
_this.reconnect();
}
return _this.setAgentOnlineState(false); return _this.setAgentOnlineState(false);
}; };
})(this); })(this);
@ -504,6 +518,18 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
})(this); })(this);
}; };
ZammadChat.prototype.wsClose = function() {
this.wsReconnectEnable = false;
return this.ws.close();
};
ZammadChat.prototype.wsReconnect = function() {
if (this.reconnectDelayId) {
clearTimeout(this.reconnectDelayId);
}
return this.reconnectDelayId = setTimeout(this.wsConnect, 5000);
};
ZammadChat.prototype.onWebSocketOpen = function() { ZammadChat.prototype.onWebSocketOpen = function() {
this.sessionId = sessionStorage.getItem('sessionId'); this.sessionId = sessionStorage.getItem('sessionId');
this.log('debug', 'ws connected'); this.log('debug', 'ws connected');
@ -519,10 +545,7 @@ var bind = function(fn, me){ return function(){ return fn.apply(me, arguments);
this.lastAddedType = 'status'; this.lastAddedType = 'status';
this.el.find('.zammad-chat-agent-status').attr('data-status', 'connecting').text(this.T('Reconnecting')); this.el.find('.zammad-chat-agent-status').attr('data-status', 'connecting').text(this.T('Reconnecting'));
this.addStatus(this.T('Connection lost')); this.addStatus(this.T('Connection lost'));
if (this.reconnectDelayId) { return this.wsReconnect();
clearTimeout(this.reconnectDelayId);
}
return this.reconnectDelayId = setTimeout(this.connect, 5000);
}; };
ZammadChat.prototype.onConnectionReestablished = function() { ZammadChat.prototype.onConnectionReestablished = function() {

File diff suppressed because one or more lines are too long