Feat: 使用 Stomp 协议发送内容

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@stomp/stompjs": "^7.0.0",
     "mqtt": "^5.7.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@stomp/stompjs':
+    specifier: ^7.0.0
+    version: 7.0.0
   mqtt:
     specifier: ^5.7.0
     version: 5.7.0
@@ -727,6 +730,10 @@ packages:
     dev: true
     optional: true
 
+  /@stomp/stompjs@7.0.0:
+    resolution: {integrity: sha512-fGdq4wPDnSV/KyOsjq4P+zLc8MFWC3lMmP5FBgLWKPJTYcuCbAIrnRGjB7q2jHZdYCOD5vxLuFoKIYLy5/u8Pw==}
+    dev: false
+
   /@types/babel__core@7.20.5:
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
     dependencies:

src/App.tsx

@@ -5,6 +5,7 @@ import "./App.css";
 import { client, start } from "./utils/mqtt";
 import { startAudio, stopAudio, context } from "./utils/microphone";
 import { arrayBufferToBase64, downSampleAudioFrame, floatTo16BitPCM, getMergedPCMData } from "./utils/audio";
+import { headers, stompClient } from "./utils/ws";
 
 let mqttData;
 
@@ -21,7 +22,17 @@ const getAudio = () => {
     // 存储一遍压缩后的音频
     buffers.push(downedFloat32Arr);
 
-    client.publish(mqttData.recognition_topic, sendItem);
+    // client.publish(mqttData.recognition_topic, sendItem);
+
+    stompClient.publish({
+      destination: "/recognition/push",
+      binaryBody: new Uint8Array(floatTo16BitPCM(downedFloat32Arr)),
+      headers: {
+        ...headers,
+        'content-type': 'application/octet-stream',
+      },
+    });
+
   });
 };
 

src/utils/ws.ts

@@ -0,0 +1,29 @@
+import { Client } from "@stomp/stompjs";
+
+export const headers = {
+  Authorization: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpbl91c2VyX2tleSI6ImJjNzY3ZWMyLTUxNDktNDVlMS1iNjg5LWMyMGI3ZmE2MWExZiIsImlhdCI6MTcwNDg1NjczMywiZXhwIjoxNzA1NDYxNTMzfQ.EaMH-eyHm1T7GDbTQbitpeIER0wMXYN8PlzjkUhB93Y'
+};
+
+export const stompClient = new Client({
+  brokerURL: 'ws://127.0.0.1:8080/recognitionWs',
+  connectHeaders: headers
+});
+
+stompClient.activate();
+
+stompClient.onConnect = (frame) => {
+  console.log('Connected: ' + frame);
+
+  // stompClient.subscribe('/recognitionTopic/c3fb0f9fd12f41dba48fe279b9cd7dc6/user/ww', (greeting) => {
+  //   console.log(greeting);
+  // });
+};
+
+stompClient.onWebSocketError = (error) => {
+  console.error('Error with websocket', error);
+};
+
+stompClient.onStompError = (frame) => {
+  console.error('Broker reported error: ' + frame.headers['message']);
+  console.error('Additional details: ' + frame.body);
+};