Annikka/evennia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More work on fixing bugs in the webclient-js interface.

Browse source
This commit is contained in:
Griatch 2016-02-08 23:51:00 +01:00
parent f42d27a459
commit b8060b9ea0
2 changed files with 91 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

157
evennia/web/webclient/static/webclient/js/evennia.js
View file

@ -49,7 +49,7 @@ An "emitter" object must have a function
var cmdid = 0; var cmdid = 0;
var cmdmap = {}; var cmdmap = {};
var evennia = { var Evennia = {
debug: true, debug: true,
@ -70,8 +70,20 @@ An "emitter" object must have a function
init: function(opts) { init: function(opts) {
opts = opts || {}; opts = opts || {};
this.emitter = opts.emitter || new DefaultEmitter(); this.emitter = opts.emitter || new DefaultEmitter();
this.connection = opts.connection || window.Websocket ? new WebsocketConnection() : new AjaxConnection();
}, if (opts.connection) {
this.connection = opts.connection;
}
else if (window.WebSocket) {
this.connection = new WebsocketConnection();
if (!this.connection) {
this.connection = new AjaxCometConnection();
}
} else {
this.connection = new AjaxCometConnection();
}
// this.connection = opts.connection || window.WebSocket ? new WebsocketConnection() : new AjaxCometConnection();
},
// Client -> Evennia. // Client -> Evennia.
// Called by the frontend to send a command to Evennia. // Called by the frontend to send a command to Evennia.
@ -87,24 +99,27 @@ An "emitter" object must have a function
var data = kwargs ? [cmdname, kwargs] : [cmdname, {}]; var data = kwargs ? [cmdname, kwargs] : [cmdname, {}];
if (typeof callback === 'function') { if (typeof callback === 'function') {
this.cmdmap[cmdid] = callback; cmdmap[cmdid] = callback;
} }
this.connection.msg(data); this.connection.msg(data);
log('cmd called with following args:', cmd, params, callback); log('cmd called with following args: ' + cmdname, ', ' + kwargs + ', ' + callback);
}, },
// Evennia -> Client. // Evennia -> Client.
// Called by the backend to emit an event to the global emitter // Called by the backend to send the data to the
// emitter, which in turn distributes it to its
// listener(s).
// //
// Args: // Args:
// event (event): Event received from Evennia // event (event): Event received from Evennia
// data (obj): // data (obj):
// //
emit: function (cmdname, data) { emit: function (cmdname, data) {
log('emit called with args: + ' + cmdname + ',' + data);
if (data.cmdid) { if (data.cmdid) {
this.cmdmap[data.cmdid].apply(this, [data]); cmdmap[data.cmdid].apply(this, [data]);
delete this.cmdmap[cmddata.cmdid]; delete cmdmap[cmddata.cmdid];
} }
else { else {
this.emitter.emit(cmdname, data); this.emitter.emit(cmdname, data);
@ -130,8 +145,8 @@ An "emitter" object must have a function
var emit = function (cmdname, kwargs) { var emit = function (cmdname, kwargs) {
log('emit', cmdname, kwargs); log('emit', cmdname, kwargs);
if (this.cmdmap[cmdname]) { if (cmdmap[cmdname]) {
this.cmdmap[cmdname].apply(this, kwargs); cmdmap[cmdname].apply(this, kwargs);
}; };
}; };
@ -143,8 +158,8 @@ An "emitter" object must have a function
// to listen to cmdname events. // to listen to cmdname events.
// //
var on = function (cmdname, listener) { var on = function (cmdname, listener) {
if typeof(listener === 'function') { if (typeof(listener === 'function')) {
this.cmdmap[cmdname] = listener; cmdmap[cmdname] = listener;
}; };
}; };
@ -154,7 +169,7 @@ An "emitter" object must have a function
// cmdname (str): Name of event to handle // cmdname (str): Name of event to handle
// //
var off = function (cmdname) { var off = function (cmdname) {
delete this.cmdmap[cmdname] delete cmdmap[cmdname]
}; };
return {emit:emit, on:on, off:off} return {emit:emit, on:on, off:off}
}; };
@ -162,97 +177,97 @@ An "emitter" object must have a function
// Websocket Connector // Websocket Connector
// //
var WebsocketConnection = function () { var WebsocketConnection = function () {
log("Trying websocket");
var websocket = new WebSocket(wsurl); var websocket = new WebSocket(wsurl);
// Handle Websocket open event // Handle Websocket open event
this.websocket.onopen = function (event) { websocket.onopen = function (event) {
log('Websocket connection openened.'); log('Websocket connection openened. ', event);
Evennia.emit('socket:open', event); Evennia.emit('socket:open', event);
}; };
// Handle Websocket close event // Handle Websocket close event
this.websocket.onclose = function (event) { websocket.onclose = function (event) {
log('WebSocket connection closed.'); log('WebSocket connection closed.');
Evennia.emit('socket:close', event); Evennia.emit('socket:close', event);
}; };
// Handle websocket errors // Handle websocket errors
this.websocket.onerror = function (event) { websocket.onerror = function (event) {
log("Websocket error to ", wsurl, event); log("Websocket error to ", wsurl, event);
Evennia.emit('socket:error', data); Evennia.emit('socket:error', event.data);
}; };
// Handle incoming websocket data // Handle incoming websocket data [cmdname, kwargs]
this.websocket.onmessage = function (event) { websocket.onmessage = function (event) {
var data = event.data var data = event.data;
if (typeof data !== 'string' && data.length < 0) { if (typeof data !== 'string' && data.length < 0) {
return; return;
} }
// Parse the incoming data, send to emitter // Parse the incoming data, send to emitter
// Incoming data is on the form [cmdname, kwargs] // Incoming data is on the form [cmdname, kwargs]
data = JSON.parse(data); data = JSON.parse(data);
Evennia.emit(data[0], data[1]]); log("incoming " + data);
Evennia.emit(data[0], data[1]);
}; };
this.websocket.msg = function(data) { websocket.msg = function(data) {
this.websocket.send(JSON.stringify(data)); websocket.send(JSON.stringify(data));
}; };
return websocket; return websocket;
} };
// AJAX/COMET Connector // AJAX/COMET Connector
// //
CometConnection = function() { AjaxCometConnection = function() {
log("Trying ajax ...");
var client_hash = '0'; var client_hash = '0';
// Send Client -> Evennia. Called by Evennia.send.
var ajaxcomet = { var msg = function(data) {
// Send Client -> Evennia. Called by Evennia.send.
var msg = function(data) {
$.ajax({type: "POST", url: "/webclientdata",
async: true, cache: false, timeout: 30000,
dataType: "json",
data: {mode:'input', msg: data, 'suid': client_hash},
success: function(data): {},
error: function(req, stat, err): {
log("COMET: Server returned error. " + err)
}
});
};
// Receive Evennia -> Client. This will start an asynchronous
// Long-polling request. It will either timeout or receive data
// from the 'webclientdata' url. Either way a new polling request
// will immediately be started.
var poll = function() {
$.ajax({type: "POST", url: "/webclientdata",
async: true, cache: false, timeout: 30000,
dataType: "json",
data = {mode: 'receive', 'suid': client_hash},
success: function(data) {
Evennia.emit(data[0], data[1])
},
error: function() {
this.poll() // timeout; immediately re-poll
}
});
};
// Initialization will happen when this Connection is created.
// We need to store the client id so Evennia knows to separate
// the clients.
$.ajax({type: "POST", url: "/webclientdata", $.ajax({type: "POST", url: "/webclientdata",
async: true, cache: false, timeout: 50000, async: true, cache: false, timeout: 30000,
datatype: "json", dataType: "json",
data: {mode:'input', msg: data, 'suid': client_hash},
success: function(data) {},
error: function(req, stat, err) {
log("COMET: Server returned error. " + err);
}
});
};
// Receive Evennia -> Client. This will start an asynchronous
// Long-polling request. It will either timeout or receive data
// from the 'webclientdata' url. Either way a new polling request
// will immediately be started.
var poll = function() {
$.ajax({type: "POST", url: "/webclientdata",
async: true, cache: false, timeout: 30000,
dataType: "json",
data: {mode: 'receive', 'suid': client_hash},
success: function(data) { success: function(data) {
this.client_hash = data.suid; Evennia.emit(data[0], data[1])
this.poll();
}, },
error: function(req, stat, err) { error: function() {
log("Connection error: " + err); poll() // timeout; immediately re-poll
} }
}); });
}; };
// Initialization will happen when this Connection is created.
// We need to store the client id so Evennia knows to separate
// the clients.
$.ajax({type: "POST", url: "/webclientdata",
async: true, cache: false, timeout: 50000,
datatype: "json",
success: function(data) {
client_hash = data.suid;
poll();
},
error: function(req, stat, err) {
log("Connection error: " + err);
}
});
return ajaxcomet; return {msg: msg, poll: poll};
}; };
window.Evennia = evennia; window.Evennia = Evennia;
})(); // end of auto-calling Evennia object defintion })(); // end of auto-calling Evennia object defintion

5
evennia/web/webclient/templates/webclient/webclient.html
View file

@ -7,4 +7,9 @@
<h1>Webclient!</h1> <h1>Webclient!</h1>
<form>
<input type="text" name="input">
<input type="button" value="Send" onClick="Evennia.msg">
</form>
{% endblock %} {% endblock %}