时间戳

首页 > 解决方案 > NodeJS JSON 到客户端处理

javascript - NodeJS JSON 到客户端处理

问题描述

我有一个完整的 C++ 和 Java 版本的 VPS 媒体服务器，它允许设备（英特尔和安卓）播放视频播放列表并即时更新。

我还有一个用 Java 编写并使用标准 UI 的设备管理器。这就是问题所在，它不适用于移动设备。

因此，我开始使用“socket.io”和“net”在 NodeJS 服务器上工作。到目前为止一切正常。Node 服务器与 Java 服务器连接，Java 服务器将其库转换为 JSON 字符串，并且 Node 服务器（显然）获取正确的数据。至少这是控制台日志中显示的内容。

我遇到的问题是当客户端浏览器接收到这些数据时，我被卡住了。

服务器设置是：

  1. Java - 设备服务器（在自己的端口上）

  2. Java - 设备管理器（自有端口）

  3. C++ - 更快地传输加密数据

  4. 现在是一个节点服务器，它与“2.”通信（看起来很完美）。

我会尽量使代码片段漂亮。

这会创建发送到节点服务器的 JSON（看起来）在 mo 中运行良好。它创建 JSON 字符串并通过 TCP localhost 连接发送它。

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();
}

在接收数据并正确记录的节点端：

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
};

它在控制台日志中给出了输出：（我会在编辑中整理一下）

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

在客户端（浏览器）上，我被卡住了。

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)

使用代码（浏览器端）：（由于研究，我知道 SyntaxError）

// 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));
});

如果有人可以帮助指导我在客户端处理这些数据，那就太好了。我也尝试将其作为原始数据发送并将其转换回来。我习惯于使用 C++ 和 Java。我经常使用 Javascript 并使用 JSON，但我现在不知道如何访问这个数组。

提前致谢。

编辑 1：JSON 数据的输出

[
    "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": ""
            }
        ]
    ]
]

console.log(res) 的输出；显示：

[object ArrayBuffer]

编辑 2：在 Tomalak 的帮助下（干杯伙伴）

我现在使用了字符串数据

console.log(new TextDecoder().decode(res));

如何遍历上述数据？我只习惯于基本的 JSON 数据，而不习惯于 JSON 中的多嵌套数组。Java 和 C++ 很好，但是这个？？？

标签： javascriptnode.js

解决方案

推荐阅读