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

【问题标题】：How to integrate Web MIDI API with React frontend and Django backend如何将 Web MIDI API 与 React 前端和 Django 后端集成
【发布时间】：2020-12-05 07:35:46
【问题描述】：

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

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

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

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

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

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

我看过这个问题：

django: keep each users data separate

【问题讨论】：

标签： javascript python django reactjs web-midi

【解决方案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;

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

【讨论】：