如何将 Web MIDI API 与 React 前端和 Django 后端集成

Question

我是 Django 和 React 的新手，但对 Python 和 JavaScript 有很好的掌握。

我想做的是使用 Web MIDI API 来监视一些 MIDI 数据，从中推断出一些信息并将其存储在数据库中。 它基本上用于 DAW，软件合成器监控系统，信息可以作为 MIDI 传输到浏览器（通过 IAC），然后各种信息存储在数据库中。 这需要每个用户完成，用户数据分离。 我猜我需要实施 CRUD API。我目前有一个 Python 项目执行此操作并将数据保存在 memory 中，格式为 JSON - 计划将其转换为 Web 应用程序。

我看过并遵循了一系列关于集成 Django 和 React 的教程，还发现了这个用于基本登录系统的样板文件。

https://github.com/justdjango/django-react-boilerplate

如果可能的话，我想使用它并添加我需要的功能，任何人都可以指出正确的方向，从哪里开始以及我将在哪里为 MIDI 东西添加额外的代码到这个样板。

这个项目还有另一个阶段，但我的目标是首先解决这一步，希望我能从那里获得更好的理解。

我看过这个问题：

django：将每个用户的数据分开

Answer 1

经过一些试验和错误后，我找到了集成它的最佳方法，所以我会在这里为任何想做这种事情的人回答。

我使用了包含所有 Web MIDI 逻辑的 midi.js 脚本。

目前它看起来像这样：

export default function () {
  navigator.requestMIDIAccess().then(onMIDISuccess);

  function onMIDISuccess(midiAccess) {
    for (var input of midiAccess.inputs.values())
      input.onmidimessage = getMIDIMessage;
  }
}

function getMIDIMessage(msg) {
  console.log(msg.data);
}

然后我使用了一个 React 组件，它只渲染从钩子componentDidMount()中导入和调用这个 MIDI 逻辑。 这是缺少的关键部分，也是它起作用的原因。 我读过一些关于它的内容，它与应用程序的生命周期有关。

看起来像这样：

import { Component } from "react";
import midi from "./midi";

class ReceiveMIDI extends Component {
  componentDidMount() {
    midi();
  }

  render() {
    return null;
  }
}

export default ReceiveMIDI;

到目前为止，这仅适用于将数据记录到控制台，我已经设置了一个脚手架应用程序，我现在只是编写一个 function 将 MIDI 转换为将数据存储在数据库中的发布请求。

Answer 2

我对 Django 和 React 还很陌生，但对 Python 和 JavaScript 有很好的了解。

我想要做的是使用 Web MIDI API 来监控一些 MIDI 数据，从中推断出一些信息并将其存储在数据库中。 它基本上是用于 DAW，软件合成器监控系统，信息可以作为 MIDI 传输到浏览器（通过 IAC），然后将各种信息存储在数据库中。 这需要按用户完成，用户数据分离。 我猜我需要实现一个 CRUD API。 I currently have a Python project that does this and holds the data in memory formatted as JSON - the plan is to take this and turn it in to a Web App.

我已经观看并遵循了一系列关于集成 Django 和 React 的教程，并且还找到了基本登录系统的这个样板。

https://github.com/justdjango/django-react-boilerplate

如果可能的话，我想使用它并添加我需要的功能，任何人都可以指出我从哪里开始以及在哪里将 MIDI 的附加代码添加到这个样板中的正确方向。

这个项目还有另一个阶段，但我的目标是首先完成这一步，希望我能从那里获得更好的理解。

我看过这个问题：

django：保持每个用户数据分开