I have created WebSocket.js but unfortunately I am unable to test it due to unavailability of data. The requirement is the data comes from various sources so I have multiple sockets for that. Note: I want to particularly test my socket.onMessage behaves for different sockets. Please find the code snippet below:
var webSocket;
var txQueue = [];
var defaultReconnectTimeout = 1000; //will be multiplied by 2 and saved into reconnectTimeout on each try
var reconnectTimeout = defaultReconnectTimeout;
var registerWebSocketHandlers = function(webSocket) {
webSocket.onclose = function(){
setTimeout(service.reopen, reconnectTimeout *= 2);
};
webSocket.onopen = function(e) {
reconnectTimeout = defaultReconnectTimeout; //reset this
deferredSend();
};
webSocket.onerror = function(e) {
throw new Error("[WebSocket] An error occured " + e);
};
}
var uniqid = function() {
return (new Date().getTime()).toString(16);
}
var deferredSend = function() {
if(!service.isOpen()) {
$timeout(deferredSend, 100);
return;
}
while(txQueue.length && service.isOpen()) {
var payload = txQueue.shift();
webSocket.send(typeof payload === 'string' ? payload : JSON.stringify(payload));
}
};
var createNewWebSocketInstance = function(apiUrl){
var websocket = new $window.WebSocket(apiUrl);
websocket.id = uniqid();
return websocket;
}
// TODO: this is a bit hacky since we directly bind it to the raw window event
$window.onbeforeunload = function(e) {
service.close();
};
var service = {};
service.setMessageEventHandler = function(name,cb) {
instances[name].onmessage = function(msg) {
if(msg.data.indexOf('Status: connected') === 0)
{
return;
}
var jsonObj = JSON.parse(msg.data);
cb(jsonObj);
};
};
service.isOpen = function() {
return webSocket.readyState === 1;
};
service.send = function(msg) {
txQueue.push(msg);
deferredSend();
};
service.close = function() {
return webSocket.close();
};
service.reopen = function() {
// get old message handler
var msgHandler = webSocket.onmessage;
// try closing the previous WebSocket
service.close();
// open new WebSocket
openConnection();
// re-attach old handler to new WebSocket
webSocket.onmessage = msgHandler;
};
service.getId = function() {
return webSocket.id;
}
// Returns an already existing instance of the socket, if unavailable then creates a new one.
service.getInstance = function(name, config) {
if(!(name in instances)) {
instances[name] = createNewWebSocketInstance(config);
}
registerWebSocketHandlers(instances[name]);
return instances[name];
};
return service;
You can test WebSocket using websocket.html at websocket.org Echo Test Creating your own test
Using a text editor, copy the following code and save it as
websocket.html somewhere on your hard drive. Then simply open it in a browser. The page will automatically connect, send a message,
display the response, and close the connection.
See Linux - WebSocket test error.
Related
For a project I've implemented a web speech api in a website/Progressive Web App which translates spoken voice to text. This all works fine, however, I would also like to use this without access to internet.
My initial thought was that I could save my recognition object to a indexeddb and process it later. However, when I try to do this I get the following error:
DOMException: Failed to execute 'put' on 'IDBObjectStore': SpeechRecognitionEvent object could not be cloned.
While I do understand why I get this error, I have no clue on any alternative way of doing this or how I can solve this error.
My object looks as following:
When I try to serialize my object using JSON.stringify() I get the following:
I lose all of my information.
My code looks as follows:
function attachRecognition() {
recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.onstart = function(event) {
recognitionStarted = true;
};
recognition.onend = function(event) {
recognitionStarted = false;
};
recognition.onresult = function(event) {
var finalPhrase = '';
var interimPhrase = '';
var result;
for(var i=0; i<event.results.length; ++i) {
result = event.results[i];
if( result.isFinal ) {
finalPhrase = finalPhrase.trim() + ' ' + result[0].transcript;
}
else {
interimPhrase = interimPhrase.trim() + ' ' + result[0].transcript;
}
}
var input_field = $(related_input_field);
if (connected) {
input_field.val(input_field.val() + finalPhrase + ".");
}
// This is where I would store my event data in case there's no connection.
else {
set(related_input_field.attr("id"), event)
.then(() => {
console.log(related_input_field.attr("id") + ' data cached');
})
.catch(console.warn);
}
}
}
How can I solve this?
Running an autobahn websocket server in Python and picking up json updates in the html frontend. The value (in this case "temp") is being displayed as a number with innerHTML when message arrive and that part works fine.
We also got a dial chart (d3js) but the update is initiated by the setInterval function at the end of the code which is far from ideal. How can I make the gauge update 'onmessage' through the websocket?
<script type="text/javascript">
//---the websocket part--
var sock = null;
var displaynumber = null;
var tempdata = null;
window.onload = function () {
var wsuri;
displaynumber = document.getElementById('disp');
if (window.location.protocol === "file:") {
wsuri = "ws://...:9000";
} else {
wsuri = "ws://" + window.location.hostname + ":9000";
}
//set up a new websocket
if ("WebSocket" in window) {
sock = new WebSocket(wsuri);
} else if ("MozWebSocket" in window) {
sock = new MozWebSocket(wsuri);
} else {
disp("Browser does not support WebSocket!");
window.location = "http://autobahn.ws/unsupportedbrowser";
}
if (sock) {
//sock.onopen = function() {};
sock.onclose = function(e) {
sock = null;
};
sock.onmessage = function(e) {
// e.data will be sent as a string and need to be converted to object
var jsondata = JSON.parse(e.data);
tempdata = jsondata.temp;
disp(tempdata + " C");
};
}
function disp(m) {
displaynumber.innerHTML = m;
}
//----This is the dial chart part
dialChart();
function dialChart() {
var powerGauge = gauge('#power-gauge', {
size: 300,
clipWidth: 300,
clipHeight: 300,
ringWidth: 60,
minValue: 0,
maxValue: 100,
transitionMs: 1000,
});
powerGauge.render();
function updateReadings() {
powerGauge.update(tempdata);
}
updateReadings();
setInterval(function() {
updateReadings();
}, 2 * 1000);
}
}
</script>
At the end of the definition of dialChart, add return powerGauge. Then when you call dialChart();, save the result to a variable. Then, instead of writing to tempdata in the socket callback, call powerGaugeVariable.update(jsondata.temp).
I have the following code snippet which I need to extend to define multiple WebSockets and I am clueless as to how do I go about it:
var registerWebSocketHandlers = function(webSocket) {
webSocket.onclose = function(){
setTimeout(service.reopen, reconnectTimeout *= 2);
};
webSocket.onopen = function(e) {
icc.publish('webSocket.reconnect');
reconnectTimeout = defaultReconnectTimeout; //reset this
deferredSend();
};
webSocket.onerror = function(e) {
throw new Error("[WebSocket] An error occured " + e);
};
}
var openConnection = function() {
connectionWasOpenBefore = true;
webSocket = new $window.WebSocket(xyz);
webSocket.id = uniqid();
registerWebSocketHandlers(webSocket);
};
var uniqid = function() {
return (new Date().getTime()).toString(16);
}
service.setMessageEventHandler = function(cb) {
webSocket.onmessage = function(msg) {
if(msg.data.indexOf('Status: connected') === 0)
{
return;
}
var jsonObj = JSON.parse(msg.data);
cb(jsonObj);
};
};
How do I twist the code to suit the needs of multiple WebSockets and attaching the appropriate callback to it?
Use the multiton pattern.
var socketFactory = module.factory('SocketFactory', function($rootScope){
var factory = {};
var instances = {};
factory.getInstance = function(name, config){
if(!(name in instances)){
instances[name] = createNewWebSocketInstance(name, config);
}
return instances[name];
};
var createNewWebSocketInstance = function(name, config){
var webSocket = new $window.WebSocket(config.address);
webSocket.id = uniqid();
registerWebSocketHandlers(webSocket, name, config.handlers); //etc.
return webSocket;
};
var registerWebSocketHandlers = function(webSocket, name, handlers){
webSocket.onmessage = function(event){
$rootScope.$emit('SocketMessageReceived_' + name, event.data);
};
//etc...
};
return factory;
});
This will separate your different websockets by name. Use getInstance('whatever') to get a websocket labelled as 'whatever'.
var firstConfig = {url: '*****', username: '****', password: '****', etc: '****'};
// You only need to pass in the config the first time.
var firstWebSocket = SocketFactory.getInstance('firstSocket', firstConfig);
var secondConfig = {url: '####', username: '####', password: '####', etc: '####'};
var secondWebSocket = SocketFactory.getInstance('secondSocket', secondConfig);
Next, from any other area you can access the configured websockets by their instance names.
var firstWebSocket = SocketFactory.getInstance('firstSocket');
// It would probably be a good idea to add this listener in the SocketFactory instead and broadcast an event when there's a message so multiple listeners can respond to it.
firstWebSocket.onmessage = function(){...};
var secondWebSocket = SocketFactory.getInstance('secondSocket');
secondWebSocket.onmessage = function(){...};
I am writing a chrome extension using indexedDB and want to use sendMessage to pass data from the background page to the popup.
If the button is pressed, a message is sent from popup to background, and a response should be written to the 'results' div.
the logging messages are all ok, but no response is sent from within the 'openRequest.onsuccess' block.
I am not sure why the response is not received from openRequest.onsuccess yet the console message just after it is written.
output from console.log;
popup;
processMessage() - 2
background;
processMessage() - 2
processMessage() - 1
content of 'results';
processMessage() - 2
popup.js
var popupInst;
var popupPage = function() {
var mThis = this;
this.msg;
this.init = function() {
document.querySelector('#btnAdd').addEventListener('click', this.add);
};
this.add = function() {
chrome.extension.sendMessage({ add: { keyName: 'key', valueName: 'value' }}, function(response) {
mThis.msg = (response.msg)
console.log(mThis.msg);
$('#results').empty().append(mThis.msg);
});
};
}
document.addEventListener('DOMContentLoaded', function(){popupInst = new popupPage(); popupInst.init();});
background.js
var bgInst;
var backgroundPage = function()
{
var mThis = this;
this.dbName = 'test-db';
this.db;
this.init = function() {
var openRequest = window.indexedDB.open(mThis.dbName,1);
openRequest.onsuccess = function(evt) {
this.db = openRequest.result;
};
openRequest.onupgradeneeded = function(evt) {
var objStore = evt.target.result.createObjectStore(this.dbName,{keyPath:"keyName"});
objStore.createIndex("keyName","keyName",{unique:true});
objStore.createIndex("valueName","valueName",{unique:false});
};
chrome.extension.onMessage.addListener(this.processMessage);
};
this.processMessage = function(msgRequest,msgSender,msgCallback) {
if(msgRequest.add) {
var openRequest = window.indexedDB.open(mThis.dbName);
openRequest.onsuccess = function(evt) {
var str1 = 'processMessage() - 1';
msgCallback({ msg: str1 }); -> this message is never received in popup.js
console.log(str1); -> but this message is written to the log
};
var str2 = 'processMessage() - 2';
msgCallback({ msg: str2 });
console.log(str2);
}
};
}
document.addEventListener('DOMContentLoaded', function(){bgInst = new backgroundPage(); bgInst.init();});
I'm trying to build a small class-like container that will make it a little cleaner to load and store data from the HTML5 IndexedDB. To be honest this is the first time I've ever played with this feature, so my issue could be trivial.
I'm basing my code off of this tutorial:
http://www.html5rocks.com/en/tutorials/indexeddb/todo/
function DBDictionary()
{
this.Holder = {};
this.Entries = new Array();
this.Opened = false;
this.v = "1.0";
this.Holder.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
if ('webkitIndexedDB' in window)
{
window.IDBTransaction = window.webkitIDBTransaction;
window.IDBKeyRange = window.webkitIDBKeyRange;
}
this.Holder.indexedDB = {};
this.Holder.indexedDB.db = null;
this.Holder.indexedDB.onerror = function(e)
{
console.log(e);
};
this.DownloadDB = function()
{
if(this.Opened) return;
var request = this.Holder.indexedDB.open("Storage");
request.onsuccess = function(e)
{
this.Holder.indexedDB.db = e.target.result;
var db = this.Holder.indexedDB.db;
// We can only create Object stores in a setVersion transaction;
if (v!= db.version)
{
var setVrequest = db.setVersion(v);
// onsuccess is the only place we can create Object Stores
setVrequest.onerror = this.Holder.indexedDB.onerror;
setVrequest.onsuccess = function(e)
{
if(db.objectStoreNames.contains("Storage")) db.deleteObjectStore("Storage");
var store = db.createObjectStore("Storage", {keyPath: "Key"});
this.PopulateAll();
};
}
else
{
this.PopulateAll();
}
};
request.onerror = this.Holder.indexedDB.onerror;
};
this.UploadDB = function()
{
this.DeleteAll();
this.SaveAll();
};
this.DeleteAll = function()
{
var db = this.Holder.indexedDB.db;
var trans = db.transaction(["Storage"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("Storage");
Entries.forEach(function(element, index, array)
{
var request = store.delete(index);
request.onerror = function(e)
{
console.log("Error Deleting: ", e);
};
});
};
this.PopulateAll = function()
{
var db = this.Holder.indexedDB.db;
var trans = db.transaction(["Storage"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("Storage");
// Get everything in the store;
var keyRange = IDBKeyRange.lowerBound(0);
var cursorRequest = store.openCursor(keyRange);
cursorRequest.onsuccess = function(e)
{
var result = e.target.result;
//No more results to load
if(!!result == false)
{
if(!this.Opened) this.Opened = true;
return;
}
this.Entries[result.Key] = result.Value;
result.continue();
};
cursorRequest.onerror = this.Holder.indexedDB.onerror;
};
this.SaveAll = function()
{
var db = this.Holder.indexedDB.db;
var trans = db.transaction(["Storage"], IDBTransaction.READ_WRITE);
var store = trans.objectStore("Storage");
Entries.forEach(function(element, index, array)
{
var data = {
"Key": index,
"Value": element,
"timeStamp": new Date().getTime()
};
var request = store.put(data);
request.onerror = function(e) {
console.log("Error Adding: ", e);
};
});
};
}
function main()
{
var dictionary = new DBDictionary();
dictionary.DownloadDB();
dictionary.Entries["hello"] = "world";
alert(dictionary.Entries["hello"]);
}
$(document).ready(main);
My desired implemented state should look something like this:
function main()
{
var dictionary = new DBDictionary();
dictionary.DownloadDB();
dictionary.Entries["hello"] = "world";
alert(dictionary.Entries["hello"]);
}
$(document).ready(main);
What this should do is download the data from the browser's IndexedDB object and store them into the object-housed array Entries. When I want to store the value of Entires back into the DB, I would call dictionary.UploadDB();
However, I'm getting the single javascript error: Uncaught TypeError: Object # has no method 'open'. I'm pretty much at a loss as to what I'm doing wrong. Can anyone offer me some tips?
Do a typeof check and console.log the this.Holder.indexedDB object to inspect the prototype. Does it inherit the IDBDatabase prototype? If it does, the open method would be available to you.
If your window.indexedDB did fire the on success callback, e.target.result would be the correct way to access the newly opened database via the event object. But the fact that you're not getting that far suggests that your this.Holder.indexedDB object is not actually an instance of an IDBDatabase.
EDIT: Yes, this is exactly your issue. If you console.log the this.holder.indexedDB object you get an object that looks like {"db":null}.
Swap this.Holder.indexedDB for window.webkitIndexedDB at your open invocation and you'll see that 'world' alert pops. JSFiddle here.