为 twitch 流媒体创建小部件
Creating widgets for twitch streamers
我在尝试流式传输时想到了这些小部件（例如聊天框、追随者目标等），我真的很想尝试制作自己的版本。
我想展示的主要示例是 streamlabs 小部件。您可以在控制面板中自定义 HTML/CSS/JS 并将其显示在您的流中，您所需要的只是指向您的小部件的 link。
我的主要问题是如何制作此类小部件。这是我认为会发生的情况（大致）：
- 有一个数据库存储所有小部件，每个小部件的 HTML/CSS/JS 都被存储。
- link 包含特定小部件的唯一数据库 ID。 link 指向 streamlabs 网站上的 API 调用，该调用发送呈现小部件并将其发送到流媒体软件中的浏览器源。
我的另一个问题是“如何将消息加载到聊天框”。
当您在 streamlabs 网站上编辑小部件时，小部件会消失大约 1-2 秒，但是当弹出新消息时，不会发生这种情况。为什么？
我知道这很多，但可以帮助一个菜鸟。谢谢！
My main question is how does one go about making such widgets
首先，这些小部件只是在流媒体软件浏览器 plugin/browser 覆盖中呈现的网站。所以你可以使用你在网站开发中使用的所有东西。
你的想法离真正的实现不远了。
- 有存储小部件设置的主服务器（带数据库）。
- Streamlabs 网站连接到主服务器并呈现带有设置的页面。
- Widget 也连接到 MAIN SERVER，通过 id 从 widget url 加载数据（一些用户信息，widget 设置等），并进行初始化。
- 用户更改了 streamlabs 站点上的一些设置，它发送到主服务器，它保存并通知小部件对新数据进行处理。
例如，简单的实现是带有 WebSocket 的 Nodejs Web 服务器，小部件是通过 WebSocket 连接到您的服务器的网页。
Another question I had was "How do messages get loaded into the chatbox".
消息的加载方式与它们在 twitch 站点中的加载方式相同，您打开一个页面，它连接到 Twitch 聊天 api 并收听新消息（顺便说一句，有一个很好的 js 库 https://github.com/tmijs/tmi.js).
When you edit a widget on the streamlabs website, the widget disappears for about 1-2s
是的，因为 Streamlabs 聊天小部件只是在更改某些设置时自行重新加载（使用新参数重新初始化小部件、加载新样式等）。至于消息，它不需要重新加载页面，小部件只是在当前“页面”中插入一条新消息。
我在尝试流式传输时想到了这些小部件（例如聊天框、追随者目标等），我真的很想尝试制作自己的版本。
我想展示的主要示例是 streamlabs 小部件。您可以在控制面板中自定义 HTML/CSS/JS 并将其显示在您的流中，您所需要的只是指向您的小部件的 link。
我的主要问题是如何制作此类小部件。这是我认为会发生的情况（大致）：
- 有一个数据库存储所有小部件，每个小部件的 HTML/CSS/JS 都被存储。
- link 包含特定小部件的唯一数据库 ID。 link 指向 streamlabs 网站上的 API 调用，该调用发送呈现小部件并将其发送到流媒体软件中的浏览器源。
我的另一个问题是“如何将消息加载到聊天框”。
当您在 streamlabs 网站上编辑小部件时，小部件会消失大约 1-2 秒，但是当弹出新消息时，不会发生这种情况。为什么？
我知道这很多，但可以帮助一个菜鸟。谢谢！
My main question is how does one go about making such widgets
首先，这些小部件只是在流媒体软件浏览器 plugin/browser 覆盖中呈现的网站。所以你可以使用你在网站开发中使用的所有东西。 你的想法离真正的实现不远了。
- 有存储小部件设置的主服务器（带数据库）。
- Streamlabs 网站连接到主服务器并呈现带有设置的页面。
- Widget 也连接到 MAIN SERVER，通过 id 从 widget url 加载数据（一些用户信息，widget 设置等），并进行初始化。
- 用户更改了 streamlabs 站点上的一些设置，它发送到主服务器，它保存并通知小部件对新数据进行处理。
例如，简单的实现是带有 WebSocket 的 Nodejs Web 服务器，小部件是通过 WebSocket 连接到您的服务器的网页。
Another question I had was "How do messages get loaded into the chatbox".
消息的加载方式与它们在 twitch 站点中的加载方式相同，您打开一个页面，它连接到 Twitch 聊天 api 并收听新消息（顺便说一句，有一个很好的 js 库 https://github.com/tmijs/tmi.js).
When you edit a widget on the streamlabs website, the widget disappears for about 1-2s
是的，因为 Streamlabs 聊天小部件只是在更改某些设置时自行重新加载（使用新参数重新初始化小部件、加载新样式等）。至于消息，它不需要重新加载页面，小部件只是在当前“页面”中插入一条新消息。