You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.7 KiB
JavaScript
121 lines
3.7 KiB
JavaScript
// -----------------------------------------------------------------------------
|
|
// input handling
|
|
// -----------------------------------------------------------------------------
|
|
|
|
var isSendMessage = function(event) {
|
|
return event.keyCode == 13 && event.shiftKey;
|
|
}
|
|
|
|
var InputHandler = function(selector) {
|
|
this.elem = $(selector);
|
|
this.elem.keydown(_.bind(this.keydown, this));
|
|
};
|
|
|
|
InputHandler.prototype.keydown = function(event) {
|
|
if (isSendMessage(event)) {
|
|
return this.handleSend(event);
|
|
}
|
|
};
|
|
|
|
InputHandler.prototype.handleSend = function(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
this.sendMessage(event.target.value);
|
|
this.clear();
|
|
};
|
|
|
|
InputHandler.prototype.sendMessage = function(message) {
|
|
var event = document.createEvent("Event");
|
|
event.initEvent("sendMsg", true, true);
|
|
event.message = message;
|
|
document.dispatchEvent(event);
|
|
};
|
|
|
|
InputHandler.prototype.clear = function() {
|
|
this.elem.val('');
|
|
}
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// connection handling
|
|
// -----------------------------------------------------------------------------
|
|
|
|
var buildWsPath = function(wsPath) {
|
|
if (window.location.port) {
|
|
return "ws://" + window.location.hostname + ":" + window.location.port + wsPath;
|
|
}
|
|
return "ws://" + window.location.hostname + wsPath;
|
|
}
|
|
|
|
var ConnectionHandler = function(wsPath) {
|
|
this.c = new WebSocket(buildWsPath(wsPath));
|
|
this.c.onopen = _.bind(this.onopen, this);
|
|
this.c.onclose = _.bind(this.onclose, this);
|
|
this.c.onerror = _.bind(this.onerror, this);
|
|
this.c.onmessage = _.bind(this.onmessage, this);
|
|
};
|
|
|
|
ConnectionHandler.prototype.onopen = function(event) {
|
|
console.log({open: event});
|
|
};
|
|
|
|
ConnectionHandler.prototype.onclose = function(event) {
|
|
console.log({close: event});
|
|
};
|
|
|
|
ConnectionHandler.prototype.onmessage = function(event) {
|
|
this.broadcastMessageReceived(event.data);
|
|
};
|
|
|
|
ConnectionHandler.prototype.broadcastMessageReceived = function(message) {
|
|
var event = document.createEvent("Event");
|
|
event.initEvent("receiveResponse", true, true);
|
|
event.message = message;
|
|
document.dispatchEvent(event);
|
|
}
|
|
|
|
ConnectionHandler.prototype.onerror = function(event) {
|
|
console.log({error: event});
|
|
};
|
|
|
|
ConnectionHandler.prototype.sendMsg = function(message) {
|
|
this.c.send(message);
|
|
};
|
|
|
|
// -----------------------------------------------------------------------------
|
|
// response rendering
|
|
// -----------------------------------------------------------------------------
|
|
|
|
var MessageDisplay = function(selector, templateSelector, errorTemplateSelector) {
|
|
this.elem = $(selector);
|
|
this.renderMessage = _.template($(templateSelector).html());
|
|
this.renderError = _.template($(errorTemplateSelector).html());
|
|
}
|
|
|
|
MessageDisplay.prototype.addMessage = function(rawmessage) {
|
|
var message = JSON.parse(rawmessage);
|
|
if (message.is_error) {
|
|
var rendered = this.renderError(message);
|
|
} else {
|
|
var rendered = this.renderMessage(message);
|
|
}
|
|
this.elem.append(rendered);
|
|
};
|
|
|
|
var Skeam = function(config) {
|
|
this.inputHandler = new InputHandler(config.inputSelector);
|
|
this.messageDisplay = new MessageDisplay(config.outputSelector,
|
|
config.messageTemplateSelector,
|
|
config.errorTemplateSelector);
|
|
this.conn = new ConnectionHandler(config.wsPath);
|
|
document.addEventListener("sendMsg", _.bind(this.sendMsg, this), false);
|
|
document.addEventListener("receiveResponse", _.bind(this.receiveResponse, this), false);
|
|
};
|
|
|
|
Skeam.prototype.sendMsg = function(event) {
|
|
this.conn.sendMsg(event.message + "\n");
|
|
}
|
|
|
|
Skeam.prototype.receiveResponse = function(event) {
|
|
this.messageDisplay.addMessage(event.message);
|
|
}
|