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

Question

我对Django和React相当陌生，但对Python和JavaScript有很好的掌握

我试图做的是使用WebMIDIAPI来监视一些MIDI数据，从中推断一些信息并将其存储在数据库中。它基本上是一个DAW软件合成监控系统，信息可以通过MIDI传输到浏览器（通过IAC），然后各种信息存储在数据库中。这需要按照每个用户进行，并将用户数据分离。我猜我需要实现一个CRUDAPI。我目前有一个Python项目，它可以实现这一点，并将数据保存在内存中，格式为JSON——计划是将其转换为Web应用程序

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

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

如果可能的话，我想使用它，只需添加我需要的功能，有人能告诉我从哪里开始，在哪里我可以为这个样板文件添加MIDI的额外代码吗

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

我已经看了这个问题：

django: keep each users data separate

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组件，它只从hookcomponentDidMount()中导入并调用这个midi逻辑，而不呈现任何内容。这是缺少的关键部分，是什么让它起作用。我读过一些关于它的文章，它与应用程序的生命周期有关

看起来是这样的：

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

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

  render() {
    return null;
  }
}

export default ReceiveMIDI;

到目前为止，这只是为了将数据记录到控制台，我已经设置了一个scaffold应用程序，现在我正在编写一个函数，将MIDI转换为post请求，以将数据存储在数据库中