How to investigate webScoket failures on Safari? - html

I just started learning WebSockets today. I am using Safari and the following C# as my WebSocket server (http://www.codeproject.com/KB/webservices/c_sharp_web_socket_server.aspx).
My client is as simple as the following:
<script type="text/javascript">
try{
var socket = new WebSocket('ws://localhost:8181');
alert(socket.readyState);
socket.onopen = function() {
alert('opened...');
};
socket.onclose = function() {
alert('closed');
};
socket.onerror = function(){
alert('error!');
}; }
catch(exception){
alert(exception);
}
</script>
On Safari, am getting the message "Closed" which means the event onclose was raised before the onopen(). I suspecting that the server is closing the connection, any idea? Also, what's the best way to investigate issues like this? any error or reason code?
Thanks!

I guess I figured it out. On Safari you can enable Developer Tools and I was getting missing Sec-WebSocket-Origin header so I went ahead and changed the following:
WebSocket-Origin changed to Sec-WebSocket-Origin

Related

Detect if another browser tab is using speechRecognition

Is it possible to tell if another Chrome tab is using webkitSpeechRecognition?
If you try to use webkitSpeechRecognition while another tab is using it, it will throw an error "aborted" without any message. I want to be able to know if webkitSpeechRecognition is open in another tab, and if so, throw a better error that could notify the user.
Unless your customer is on the same website(you could check by logging the ip/browserprint in database and requesting by json) you cannot do that.
Cross domain protection is in effect, and that lets you know zilch about what happens in other tabs or frames.
I am using webkitSpeechRecognition for chrome ( does not work on FF) and I faced same issues like multiple Chrome tabs. Until the browser implement a better error message a temporary solutions that work for me:
You need to detect when a tab is focused or not in Chrome using
Javascript.
Make javascript code like this
isChromium = window.chrome;
if(isChromium)
{
if (window.addEventListener)
{
// bind focus event
window.addEventListener("focus", function (event)
{
console.log("Browser tab focus..");
recognition.stop();// to avoid error
recognition.start();
}, false);
window.addEventListener("blur", function (event)
{
console.log("Browser tab blur..");
recognition.stop();
}, false);
}
}
There's a small workaround for it. You can store the timestamp in a variable upon activating SpeechRecognition and when it exits after a few seconds of inactivity, it will be compared to a timestamp since the SpeechRecognition was activated. Since two tabs are using the API simultaneously, it will exit immediately.
For Chrome, you can use the code below and modify it base on your needs. Firefox doesn't support this yet at the moment.
var transcriptionStartTime;
var timeSinceLastStart;
function configureRecognition(){
var webkitSpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = "en-US";
recognition.onend = function() {
timeSinceLastStart = new Date().getTime() - transcriptionStartTime;
if (timeSinceLastStart < 100) {
alert('Speech recognition failed to start. Please close the tab that is currently using it.');
}
}
}
}
See browser compatibility here: https://developer.mozilla.org/en-US/docs/Web/API/SpeechRecognition

Programmatically update service worker if update() is not available

How can I programmatically update service worker since ServiceWorkerRegistration.update() has not been implemented in Chrome yet? Is there an alternative?
I assume you got this by now but I think you want serviceWorker.skipWaiting()
From the spec.
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw-test/sw.js', {scope: 'sw-test'}).then(function(registration) {
// registration worked
console.log('Registration succeeded.');
button.onclick = function() {
registration.update();
}
}).catch(function(error) {
// registration failed
console.log('Registration failed with ' + error);
});
};
Thr best workaround seems to be to force update by changing checksum of the service worker file by some simple backend code (it can be like last commented line with microtime), which will be detected by browser

Chrome extension: (DOM)Debugger API does not work anymore

Our chrome extension does not work correctly anymore since version 37.0.2062.103 (It used to work correctly on chrome version 36.0.1985.143).
Specifically, the debugger API has stopped working for us when we use the DOMDebugger.
See the attached code: (background.js)
chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){
if( changeInfo.status == "loading" && tab.active){
var debugId = {tabId:tabId};
chrome.debugger.attach(debugId, '1.0', function() {
chrome.debugger.sendCommand(debugId, 'Debugger.enable', {}, function() {
chrome.debugger.sendCommand(debugId, "DOMDebugger.setEventListenerBreakpoint", {'eventName':'click'},
function(result) {
console.log('registering click');
});
});
});
}
});
chrome.debugger.onEvent.addListener(onEvent);
function onEvent(debuggeeId, method,params) {
if(method=="Debugger.paused"){
console.log('DONE!');
}
};
The extension successfully starts the debugger. we get the yellow debugger ribbon.
We also see the 'registering click' msg in the console. the result argument is an empty object {} (line 8).
However upon clicking on a button that has a click event listener nothing happens.
It used to work without any issues.
It seems like it regressed with https://codereview.chromium.org/305753005. One needs to call "DOM.enable" for it to work now. On the Chrome side, we should implicitly enable DOM domain upon setEventListenerBreakpoint for backwards compatibility. Unfortunately it already squeezed into the stable release.

WebSocket API Connection issue

I suppose I'm havin' a beginner's problem regarding websocket connection.
Here's the thing, I'm researching on using websocket and I followed this code:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
alert("WebSocket is supported by your Browser!");
// Let us open a web socket
var ws = new WebSocket("ws://172.16.0.195:8080/echo");
ws.onopen = function()
{
// Web Socket is connected, send data using send()
ws.send("Message to send");
alert("Message is sent...");
};
ws.onmessage = function (evt)
{
var received_msg = evt.data;
alert("Message is received...");
};
ws.onclose = function()
{
// websocket is closed.
alert("Connection is closed...");
};
}
else
{
// The browser doesn't support WebSocket
alert("WebSocket NOT supported by your Browser!");
}
}
</script>
</head>
<body>
<div id="sse">
Run WebSocket
</div>
</body>
</html>
... which I copied from the internet. When I tested it, Firefox said that my browser supports websocket feature but it DOESN'T ESTABLISH CONNECTION TO MY SERVER. I try to telnet our server in port 80 and I could gain connection to it. But if I am to use websocket connection in my page,it does not establish connection anymore.
Thank you very much in advance for any inputs/help.
[EDIT]
** by the way, does ".../echo" in my specified websocket connection has to do something with it? I mean, do I have to have some echo.php in my server?
This tutorial helped me a lot:
Getting started with HTML5′s Web Sockets
Now I have my server set up already.

xmlhttprequest always returning status 0 even client and server on same machine

i know this questions asked several times, and i am referring all these post, even after that also not able to solve my problem. I have created a html page for client server communication. Here is the code
<!DOCTYPE html>
<html>
<head>
<title>Sandbox</title>
<script type="text/javascript">
function log (text) {
document.getElementById("contents").innerHTML = document.getElementById("contents").innerHTML + "<br />" + text;
}
function ready() {
log("Ready.");
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
log("State: " + xmlhttp.readyState + ", Status: " + xmlhttp.status
+ ", Statustext: " + xmlhttp.responseText);
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
log("CSV Content:");
log(xmlhttp.responseText);
}
};
log("Open.");
xmlhttp.open("GET", "http://10.5.13.142/iptvservice.xml", false);
log("Send.");
xmlhttp.send(null);
log("Sent.");
window.removeEventListener('DOMContentLoaded', ready, false);
}
window.addEventListener('DOMContentLoaded', ready, false);
</script>
</head>
<body>
<div id="contents">Loading.</div>
</body>
</html>
server is a Apache server.I am running this page on a same machine where server installed. On Mozilla status code is 0 and on It hanged on loading. I am not getting what is the problem. i have read that you don't need to set the permission on manifest.json if you are on the same domain. Then where i am getting wrong. Please help.
Edit: Actually my requirement is to run this code on android using phonegap. So i want to do using java script. So anybody can suggest using xmlhttprequest how to create client server connection.
sorry, but just now i got this link
XMLHttpRequest Fails On Same Domain
but in my case Apache server giving xml page. So where i should put my script.and this is just for testing purpose i am using same machine, but after that i need to run same page on different machine. Then what would be the solution. sorry i am asking very simple question, but required little help.
Edit: just for information. I did change according to the link
http://www.skill-guru.com/blog/2011/02/04/adding-access-control-allow-origin-to-server-for-cross-domain-scripting/
and then ran on google chrome, it worked, but it still not working on firefox. Anyways, atleast my code and server installation is proper.