I have written a very simple test application that creates a websocket and parses the data it receives (server sends valid JSON data).
The problem is that the first JSON object is parsed successfully, but all the subsequent objects are parsed with errors.
Here's all the code:
$("#connect").click(function ()
{
socket = new WebSocket("my server address");
socket.onopen = function ()
{
$("#log").append("Connection opened.<br/>");
socket.send(/* login information goes here */));
};
socket.onerror = function (e)
{
$("#log").append("Error: " + e.data + "<br/>");
};
socket.onclose = function ()
{
$("#log").append("Connection closed.<br/>");
};
socket.onmessage = function (e)
{
$("#log").append(index.toString() + ": " + e.data + "<br/><br/>");
console.log("Parsing " + index);
index++;
var obj = JSON.parse(e.data);
console.log("Parsed:");
console.log(obj);
};
});
What I'm getting is: The first time "socket.onmessage" called - JSON is parsed and JS console displays an object. When second one arrives it outputs it to my "log", but JSON.parse fails with error "Uncaught SyntaxError: Unexpected token ILLEGAL".
What is puzzling me is that the string that is received is a valid JSON object - I have tested it through several JSON validators. I have even copy-pasted it from my "log" put it in a separate file and parsed it with $.getJSON - and it worked fine, no errors.
Browser: Chrome 13.0.782.112
Any ideas would be helpful.
Thank you.
ES5 spec http://ecma262-5.com/ELS5_HTML.htm#Section_15.12.1 defines JSON whitespace as tab, cr, lf or sp. The Crockford skip-space uses the following code :
white = function () {
// Skip whitespace.
while (ch && ch <= ' ') {
next();
}
},
So if you have any spurious null characters or form-feeds etc in your response then the ES5 JSON parse will throw an error while the Crockford version will not.
You should do:
$.parseJSON( json );
see this for more info:
http://api.jquery.com/jQuery.parseJSON/
Related
I have a json file called myjson.json which looks like this:
{
"num": 5
}
I now make an http request to get this json:
let http = new XMLHttpRequest();
let url = "http://localhost/myjson.json";
http.open("GET", url);
http.onreadystatechange = (e) => {
if(http.status === 200){
try{
let {num} = JSON.parse(http.responseText);
console.log(num); //This Prints The Number 5 in the console
}catch(err){
console.log('Error parsing the num: ' + err); //*This runs as well. The err = SyntaxError: Unexpected end of JSON input
}
}else{
console.log('Error retrieving the num: ' + http.status);
}
}
http.send();
So the number 5 is shown in the console so it seems to have parse properly, but I get the following error in the console:
Error parsing the index : SyntaxError: Unexpected end of JSON input
So it seems to work, but this error shows up. What can I do to remove this error?
I have a newbie question with receiving JSON data from Python working as a server. I need to tell you that the server is based on WebSockets and I'm sending JSON data from Python to JavaScript successfully but I can't find any source how to proceed with this data to parse this and show it in different divs like value of the first_name in the id="message-1" div, second_name in the message2 div etc. Could you help me figure this out? Here is the code and picture what my firefox return: Web page.
I almost forgot to mention that I'm using localhost with xampp or ngrok to "host" my client-side. Also, there is a connection because I'm receiving logs on the website as well as in python console
Thanks in advance :)
Here is python code:
import asyncio
import websockets
import json
async def time(websocket, path):
while True:
d = {'first_name': 'Guido',
'second_name': 'Rossum',
'titles': ['BDFL', 'Developer'],
}
parsed = json.dumps(d)
name = "Jeremy"
# now = datetime.datetime.utcnow().isoformat() + 'Z'
for i in range(1):
await websocket.send(parsed)
response = await websocket.recv()
print(response)
start_server = websockets.serve(time, '127.0.0.1', 4040)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
Here is HTML/JS code
<body>
<div id="message-1"></div>
<div id="message-2"></div>
<div id="message-3"></div>
<script>
var ws = new WebSocket("ws://127.0.0.1:4040/");
ws.onopen = function () {
ws.send('Hello, Server!!');
//send a message to server once ws is opened.
console.log("It's working onopen log / awake");
};
ws.onmessage = function (event) {
if (typeof event.data === "string") {
// If the server has sent text data, then display it.
console.log("On message is working on log with onmessage :)");
var label = document.getElementById("message-1");
label.innerHTML = event.data;
}
};
ws.onerror = function (error) {
console.log('Error Logged: ' + error); //log errors
};
</script>
</body>
You need to parse the message you received and attach it to the dom!
ws.onmessage = function (event) {
try {
var obj = JSON.parse(event.data);
document.getElementById("message-1").innerHTML = obj.first_name;
document.getElementById("message-2").innerHTML = obj.second_name;
document.getElementById("message-3").innerHTML = obj.titles.join(" ");
} catch {
console.log("Object is not received, Message is:: ", event.data);
}
}
If this is not working, then check the json format your are sending!
Remember JSON Needs to be valid json, Replace ' (single-quote) with " (double-quote):
d = {
"first_name": "Guido",
"second_name": "Rossum",
"titles": ["BDFL", "Developer"]
}
I'm trying to send a MessagePack-encoded message from Cowboy to a browser over WebSocket, and received data is always empty or invalid. I'm able to send binary data from JS to my cowboy handler, but not vice versa.
I'm using Cowboy 1.0.4 with official msgpack-erlang application. I also use msgpack-lite for my in-browser javascript.
Examples:
websocket_handler:
websocket_handle({text, <<"return encoded">>}, Req, State) ->
%% sends encoded message to client. Client is unable to decode and fails
{reply, {binary, msgpack:pack(<<"message">>)}, Req, State};
websocket_handle({binary, Encoded}, Req, State) ->
%% Works as expected
lager:info("Received encoded message: ~p", [msgpack:unpack(Encoded)]),
{ok, Req, State};
JS:
var host = "ws://" + window.location.host + "/websocket";
window.socket = new WebSocket(host);
socket.binaryType = 'arraybuffer';
socket.onmessage = function(event) {
var message = msgpack.decode(event.data);
console.log(message);
};
Browser returns an error inside msgpack.min.js:
Error: Invalid type: undefined
...ion n(t){var r=i(t),e=f[r];if(!e)throw new Error("Invalid type: "+(r?"0x"+r.toSt...
If I try to output raw event.data to console, here's what I'm getting:
ArrayBuffer {}
It seems to be empty for some reason. I'm new both to erlang and msgpack, and don't know what is going wrong. Thanks for your help!
Found the reason of my problem.
The way how I tried to decode message on the client was wrong:
socket.onmessage = function(event) {
var message = msgpack.decode(event.data);
console.log(message);
};
The right way:
socket.onmessage = function(event) {
var raw_binary_data = new Uint8Array(event.data);
var message = msgpack.decode(raw_binary_data);
console.log(message);
};
It seems like msgpack-lite doesn't support binary type. Try pack your data as a string.
{binary, msgpack:pack("message", [{enable_str, true}])}
Using Uint8Array is a valid solution for client side issue. On server to pack strings use:
msgpack:pack(<<"message">>,[{pack_str,from_binary}])
Source : Article
I'm using AJAX/JQuery to call a WCF service. I have some .NET try/catch error-handling on the service-side that checks to see if the user has timed out, and if they have then I pass back a JSON-converted message which I then parse out on the client-end using parseJSON and use it to re-direct the user back a login page.
This is all working great, but I just got a different type of error returned from the service that WASN'T in JSON format (it was XML) so the error-handling function got a javascript error on the client side when it tried to parse the reply. The error was in the jquery.min.js file, and was an 'Invalid character' error.
My question (finally), is there a better way to handle that reply if I can't always rely on it being JSON? In .NET we have a tryParse method available that would work great here, but as far as I know JQuery/Javascript has no such feature. If it can't parse the reply, it throws a JS error.
Here is where the custom JSON exception is thrown:
private HttpSessionState GetUserSession()
{
HttpSessionState session = HttpContext.Current.Session;
try
{
// This is a method we created that checks if user has timed out and throws the exception if so.
SessionBuilder.Create(session, HttpContext.Current.Request, HttpContext.Current.Response);
}
catch (SessionTimeOutException e)
{
throw new WebFaultException<SessionTimeOutException>(new SessionTimeOutException(e.Message), System.Net.HttpStatusCode.BadRequest);
}
return session;
}
And here is the client-side code that handles errors in my AJAX request:
error: function (HttpRequest)
{
// This is the line that gets the exception because the responseText is a standard .NET XML error, not my custom JSON error.
var parsedReply = $.parseJSON(HttpRequest.responseText);
if (parsedReply.ClassName === "SessionTimeOutException")
{
var url = "../timeout.asp?" + parsedReply.Message;
window.location.href = url;
}
}
JavaScript has try { ... } catch(ex) { ... } also.
error: function (HttpRequest)
{
var parsedReply;
try {
parseReply = $.parseJSON(HttpRequest.responseText);
if (parsedReply.ClassName === "SessionTimeOutException")
{
var url = "../timeout.asp?" + parsedReply.Message;
window.location.href = url;
}
} catch(ex) {
parsedReply = HttpRequest.responseText;
//Do something else
}
}
I have a large complex web app with thousands of lines of Javascript. There is a small set of intermittent Javascript bugs that are report by users.
I think these are epiphenomena of race conditions - something has not initialised correctly and the Javascript crashes causing 'down stream' js not to run.
Is there anyway to get Javascript execution crashes to log back server side?
All the js logging libraries like Blackbird and Log4JavaScript are client-side only.
I have written a remote error logging function using window.onerror as suggested by #pimvdb
Err = {};
Err.Remoterr = {};
Err.Remoterr.onerror = function (msg, errorfileurl, lineno) {
var jsonstring, response, pageurl, cookies;
// Get some user input
response = prompt("There has been an error. " +
"It has been logged and will be investigated.",
"Put in comments (and e-mail or phone number for" +
" response.)");
// get some context of where and how the error occured
// to make debugging easier
pageurl = window.location.href;
cookies = document.cookie;
// Make the json message we are going to post
// Could use JSON.stringify() here if you are sure that
// JSON will have run when the error occurs
// http://www.JSON.org/js.html
jsonstring = "{\"set\": {\"jserr\": " +
"{\"msg\": \"" + msg + "\", " +
"\"errorfileurl\": \"" + errorfileurl + "\", " +
"\"pageurl\": \"" + pageurl + "\", " +
"\"cookies\": \"" + cookies + "\", " +
"\"lineno\": \"" + lineno + "\", " +
"\"response\": \"" + response + "\"}}}";
// Use the jquery cross-browser post
// http://api.jquery.com/jQuery.post/
// this assumes that no errors happen before jquery has initialised
$.post("?jserr", jsonstring, null, "json");
// I don't want the page to 'pretend' to work
// so I am going to return 'false' here
// Returning 'true' will clear the error in the browser
return false;
};
window.onerror = Err.Remoterr.onerror;
I deploy this between the head and body tags of the webpage.
You will want to change the JSON and the URL that you post it to depending on how you are going to log the data server side.
Take a look at https://log4sure.com (disclosure: I created it) - but it is really useful, check it out and decide for yourself. It allows you to log errors/event and also lets you create your custom log table. It also allows you to monitor your logs real-time. And the best part, its free.
You can also use bower to install it, use bower install log4sure
The set up code is really easy too:
// setup
var _logServer;
(function() {
var ls = document.createElement('script');
ls.type = 'text/javascript';
ls.async = true;
ls.src = 'https://log4sure.com/ScriptsExt/log4sure.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ls, s);
ls.onload = function() {
// use your token here.
_logServer = new LogServer("use-your-token-here");
};
})();
// example for logging text
_logServer.logText("your log message goes here.")
//example for logging error
divide = function(numerator, divisor) {
try {
if (parseFloat(value) && parseFloat(divisor)) {
throw new TypeError("Invalid input", "myfile.js", 12, {
value: value,
divisor: divisor
});
} else {
if (divisor == 0) {
throw new RangeError("Divide by 0", "myfile.js", 15, {
value: value,
divisor: divisor
});
}
}
} catch (e) {
_logServer.logError(e.name, e.message, e.stack);
}
}
// another use of logError in window.onerror
// must be careful with window.onerror as you might be overwriting some one else's window.onerror functionality
// also someone else can overwrite window.onerror.
window.onerror = function(msg, url, line, column, err) {
// may want to check if url belongs to your javascript file
var data = {
url: url,
line: line,
column: column,
}
_logServer.logError(err.name, err.message, err.stack, data);
};
// example for custom logs
var foo = "some variable value";
var bar = "another variable value";
var flag = "false";
var temp = "yet another variable value";
_logServer.log(foo, bar, flag, temp);