I have a fully working VPS media server in C++ and Java that allows devices (both intel and android) to play a video playlist and be updated on the fly.
I've also got a device manager written in Java and using the standard UI. This is the problem, it doesn't work on mobile devices.
So, I've started working on a NodeJS server, using 'socket.io' and 'net'. Which so far is all working fine. The Node server connects with the Java server, the Java server converts its library to a JSON string and the Node server gets (apparently) the correct data. At least that's what is shown on the console log.
The problem I am having is when the client browser receives this data, I'm stuck.
The server setup is:
Java - Device server (on its own port)
Java - Device manager (own port)
C++ - Faster transferring of encrypted data
And now a Node server which communicates (seemingly perfectly) with '2.'.
I'll try to make the code snippets pretty.
This creates the JSON that gets sent to the Node server (seemingly) working great at the mo. It creates the JSON string and sends it over the TCP localhost connection great.
private void get_videos(BufferedReader br, BufferedWriter bw)
throws IOException {
//bw.write("[{name:'Carl'}]");
//bw.flush();
JSONArray media = new JSONArray();
synchronized (dev_server2.deviceServer_Main.library.media_lock) {
JSONArray areaArray = new JSONArray();
for (Area area : dev_server2.deviceServer_Main.library.media) {
//JSONObject newArea = new JSONObject();
//newArea.put("area", area.name);
//areaArray.put(newArea);
areaArray.put(area.name);
JSONArray catArray = new JSONArray();
for (Category cat : area.category) {
catArray.put(cat.name);
JSONArray vidArray = new JSONArray();
for (VideoFile vid : cat.videos) {
JSONObject vidObject = new JSONObject();
vidObject.put("name", vid.name);
vidObject.put("description", vid.description);
vidObject.put("watershed", vid.watershed);
vidArray.put(vidObject);
}
catArray.put(vidArray);
}
areaArray.put(catArray);
}
media.put(areaArray);
bw.write(areaArray.toString());
}
//bw.write(areaArray.toString());
bw.flush();
}
On the Node side which receives the data and logs it correctly:
const global = require("../global/global.js");
const node_port = 2000;
function dm_get_videos(socket) {
videos = [];
client = new global.net.Socket();
client.connect({port: node_port, host: 'localhost'},
function() {
console.log("dm_get_videos");
client.write("get_videos\n");
});
client.on("data", function(data) {
console.log("TCP socket data: " + data);
socket.emit("get_videos", data);
//socket.emit("get_videos", JSON.stringify(data));
});
client.on("end", function() {
console.log("TCP socket disconnected");
});
client.on("error", function() {
console.log("ERROR: getting videos");
});
}
module.exports = {
get_videos : dm_get_videos
};
Which gives the output in the console log: (I'll tidy this up in an edit)
dm_get_videos
TCP socket data: ["Home",["Home",[{"watershed":false,"name":"Runcorn-TheUnion-FridayNEW.mp4","description":""},{"watershed":false,"name":"Runcorn-TheUnion-LADIESdartsNEW.mp4","description":""},{"watershed":false,"name":"Runcorn-TheUnion-MondayDominoesNEW.MP4","description":""},{"watershed":false,"name":"Runcorn-TheUnion-Pool.mp4","description":""},{"watershed":false,"name":"Runcorn-TheUnion-SaturdayKaraokeNEW.mp4","description":""},{"watershed":false,"name":"Runcorn-TheUnion-SkySportsNEW.mp4","description":""},{"watershed":false,"name":"Runcorn-TheUnion-SundayBingoNEW.mp4","description":""},{"watershed":false,"name":"Runcorn-TheUnion-TuesdayUnionNEW.mp4","description":""},{"watershed":false,"name":"Runcorn-TheUnion-WednesdayQuizNEW.mp4","description":""},{"watershed":false,"name":"Runcorn-TheUnion-WelcomeUnion.mp4","description":""}]]]
TCP socket disconnected
On the client side (browser), is were I am stuck.
socket get_videos: [object ArrayBuffer]
landing.js:145 data: 20
VM1960:1 Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at r.<anonymous> (landing.js:146)
at r.emit (index.js:83)
at r.onevent (index.js:83)
at r.onpacket (index.js:83)
at r.<anonymous> (index.js:83)
at r.emit (index.js:83)
at r.ondecoded (index.js:83)
at a.<anonymous> (index.js:83)
at a.r.emit (index.js:83)
Using the code (browser side): (I'm aware of the SyntaxError because of researching)
// get video list
socket.emit("get_videos");
socket.on("get_videos", (res) => {
data = "";
data += res;
//pdata = JSON.parse(data);
console.log("socket get_videos: " + data);
console.log("data: " + data.length);
console.log(JSON.parse(data));
});
If anyone can help in directing me into working with this data on the client side then great. I've also tried sending it as raw data and converting it back. I'm used to working with C++ and Java. I have used Javascript a lot and used JSON, but I don't know how to now, access this array.
Thanks in advance.
EDIT 1: Output of the JSON data
[
"Home",
[
"Home",
[
{
"watershed": false,
"name": "Runcorn-TheUnion-FridayNEW.mp4",
"description": ""
},
{
"watershed": false,
"name": "Runcorn-TheUnion-LADIESdartsNEW.mp4",
"description": ""
},
{
"watershed": false,
"name": "Runcorn-TheUnion-MondayDominoesNEW.MP4",
"description": ""
},
{
"watershed": false,
"name": "Runcorn-TheUnion-Pool.mp4",
"description": ""
},
{
"watershed": false,
"name": "Runcorn-TheUnion-SaturdayKaraokeNEW.mp4",
"description": ""
},
{
"watershed": false,
"name": "Runcorn-TheUnion-SkySportsNEW.mp4",
"description": ""
},
{
"watershed": false,
"name": "Runcorn-TheUnion-SundayBingoNEW.mp4",
"description": ""
},
{
"watershed": false,
"name": "Runcorn-TheUnion-TuesdayUnionNEW.mp4",
"description": ""
},
{
"watershed": false,
"name": "Runcorn-TheUnion-WednesdayQuizNEW.mp4",
"description": ""
},
{
"watershed": false,
"name": "Runcorn-TheUnion-WelcomeUnion.mp4",
"description": ""
}
]
]
]
Output of console.log(res); shows:
[object ArrayBuffer]
EDIT 2: With help from Tomalak (cheers buddy)
I've now got the string data using
console.log(new TextDecoder().decode(res));
How do I iterate through the above data? I'm only used to basic JSON data and not multi nested arrays in JSON. Java and C++ fine, but this???
