如何使用 JavaScript 从实时输出流中获取数据

Question

实时输出流Link：https://wunder-provider.herokuapp.com/

我上面有一个实时输出流，它每 3 到 15 秒生成一次随机用户信息。我正在创建一个 React Native 应用程序，在屏幕上显示这些用户及其信息。

我的问题是从该输出流中获取数据。

当我尝试 fetch 方法时，它 returns 这个错误。

  componentWillMount() {
    fetch("https://wunder-provider.herokuapp.com/")
      .then(res => res.json())
      .then(res => console.log(JSON.stringify(res)))
  }

错误：

Possible Unhandled Promise Rejection (id: 0):
SyntaxError: Unexpected token < in JSON at position 0
SyntaxError: Unexpected token < in JSON at position 0
    at parse (<anonymous>)
    at tryCallOne (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:3747:14)
    at blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:3848:17
    at blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:28372:21
    at _callTimer (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:28261:9)
    at _callImmediatesPass (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:28297:9)
    at Object.callImmediates (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:28516:14)
    at MessageQueue.__callImmediates (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:3149:16)
    at blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:2970:18
    at MessageQueue.__guard (blob:http://localhost:19001/6cf08556-7310-4c2d-b838-9a8fcadc2be1:3132:13)

如何从该源获取数据并添加到我的状态？

已解决！

  constructor(props) {
    super(props);

    this.state = {
      users: []
    };

    const ws = new WebSocket(
      "wss://wunder-provider.herokuapp.com/socket.io/?EIO=3&transport=websocket"
    );

    ws.onopen = () => {
      console.log("Opened.");
    };

    ws.onmessage = msg => {
      if (msg.data.substr(0, 2) === "42") {
        const stringToBeParsed = msg.data.substr(2);
        const obj = JSON.parse(stringToBeParsed);
        this.setState({ users: [...this.state.users, obj[1].results[0]] });
      }
    };
  }

Answer 1

您正在尝试将 HTML 解析为 JSON。您请求的 url 正在提供一个 HTML 页面。您可以通过添加 console.log(res) 来验证这一点。输出将是 HTML.

Unexpected token < 错误是 <html> 标签

Answer 2

发布的回答说您正在尝试将 HTML 解析为 JSON 是正确的。如果您在“https://wunder-provider.herokuapp.com/”中打开开发人员工具并打开“网络”选项卡，您将能够看到请求。

其中一个请求 https://wunder-provider.herokuapp.com/ 将 HTML 作为其响应正文。这意味着当您对 URL 执行提取函数时，您将收到 HTML.

此外，如果我们仔细研究这些请求，您应该对其中一个特别感兴趣，那就是对 wss://wunder-[=21= 的请求]/URL。您可以做的是在您的 React Native 应用程序和服务器之间创建一个 websocket 连接并订阅 'userList' 频道。

如何使用 JavaScript 从实时输出流中获取数据

How to fetch data from a live outputstream with JavaScript

javascript

json

outputstream

react-native

fetch-api