如何將 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：保持每個用戶數據分開