使用Vue.js和Socket.IO构建AI聊天机器人Demo：语音识别与回应

当涉及到使用Vue.js和Socket.IO创建一个简单的AI聊天机器人Demo时，以下是一些步骤和注意事项，以确保您的应用程序可以正确运行。本文基于Smashing Magazine的文章:Building A Simple AI Chatbot With Web Speech API And Node.js

构建，感谢他们提供的指导。

步骤1：设置Vue.js应用程序

首先，您需要创建一个Vue.js应用程序，用于前端部分。您可以使用Vue CLI或手动设置Vue.js应用程序。

在Vue.js应用程序中，您需要执行以下步骤：

1. 引入Vue.js和Socket.IO：

   import { ref, onMounted } from 'vue';
   import io from 'socket.io-client';
   

2. 创建Vue组件并设置Socket.IO连接：

   const socket = io('http://localhost:3000'); // 修改为您的服务器地址

3. 使用ref创建用于存储聊天消息的变量：

   const chatMessages = ref([]);

4. 创建SpeechRecognition对象，用于语音识别：

   const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; 
   const recognition = new SpeechRecognition();

5. 创建启动和停止语音识别的函数：

   const startRecognition = () => { 
   recognition.start(); 
   }; const stopRecognition = () => { 
   recognition.stop(); };

6. 添加语音识别事件监听器，以便在识别到文本时进行处理并将其发送到服务器：

   recognition.addEventListener('result', (e) => { 
   let last = e.results.length - 1; 
   let text = e.results[last][0].transcript; // 处理识别到的文本，例如将其显示在页面上或发送到服务器 
   chatMessages.value.push({ text, isUser: true }); // 显示用户的消息 // 将用户消息发送到服务器 socket.emit('chat message', text); });

7. 监听来自服务器的聊天消息并显示在界面上：

   socket.on('bot reply', (aiText) => { 
   chatMessages.value.push({ text: aiText, isUser: false }); // 显示机器人的回复 // 播放机器人的回复 synthVoice(aiText); });

8. 创建用于将文本转化为语音的函数：

   function synthVoice(text) { const synth = window.speechSynthesis; 
   const utterance = new SpeechSynthesisUtterance();
    utterance.text = text; 
   synth.speak(utterance); 
   }

9. 在组件加载时建立与Socket.IO服务器的连接：

   onMounted(() => { socket.on('connect', () => { 
   console.log('Connected to server'); 
   }); 
   });

10. 最后，将所有变量和函数导出以供组件使用。

 

步骤2：设置Socket.IO服务器

在后端，您需要创建一个Node.js服务器来处理WebSocket连接和与Wit.ai的集成。以下是主要步骤：

1. 引入必要的依赖项：

   const express = require("express"); 
   const http = require("http"); 
   const socketIo = require("socket.io"); 
   const Wit = require("node-wit").Wit;

2. 创建Express应用程序并使用HTTP创建服务器：

   const app = express(); 
   const server = http.createServer(app);

3. 设置Socket.IO并允许跨源请求：

   const io = socketIo(server, { 
   cors: { origin: "http://localhost:8080", // 允许来自http://localhost:8080的跨源请求 methods: ["GET", "POST"], // 允许的HTTP方法 },
    });

4. 创建Wit.ai的访问令牌：

   const witAccessToken = "你的客户端秘钥 ";
    const witClient = new Wit({ accessToken: witAccessToken });

5. 监听WebSocket连接并处理客户端消息：

   io.on("connection", (socket) => { console.log("A user connected"); // 添加连接日志 socket.on("chat message", (text) => { 
   console.log("Received message from client:", text); // 添加接收消息的日志 // 使用Wit.ai处理用户消息 
   witClient .message(text, {}) .then((data) => { // 提取Wit.ai的回应 const witResponse = data.intents[0] || {}; 
   const aiText = witResponse.text || "I'm not sure what you mean."; 
   console.log("Sending bot reply:", aiText); // 添加发送回应的日志 // 将结果发送回浏览器 socket.emit("bot reply", aiText); }) .catch((error) => { 
   console.error(error); 
   socket.emit("bot reply", "Sorry, something went wrong."); }); }); 
   socket.on("disconnect", () => { console.log("A user disconnected"); // 添加断开连接日志 }); });

6. 启动服务器并监听端口：

   const PORT = 3000; 
   server.listen(PORT, () => { 
   console.log(`Server is running on port ${PORT}`);
    });

步骤3：测试应用程序

现在，您可以启动Vue.js应用程序和Node.js服务器，并在浏览器中测试您的AI聊天机器人Demo。

通过点击"START"按钮开始语音识别，然后说出您的消息。您的语音输入将通过WebSocket发送到服务器，并经过Wit.ai处理后，机器人的回复将显示在界面上，并且可以以语音形式回放。

这个简单的AI聊天机器人Demo为您提供了一个基本的示例，展示了如何使用Vue.js、Socket.IO、Wit.ai以及Web浏览器的语音识别和语音合成功能来构建一个具有语音交互的聊天应用程序。根据这个示例，您可以进一步扩展和定制您的应用程序，以满足特定的需求和用例。希望这篇博客对您有所帮助！

如果您想了解更多细节或深入了解这个示例，请查看原始文章Smashing Magazine。