如何使用socket.io在客户机(web浏览器)中显示来自node.js服务器的实时数据？
我想在浏览器中显示实时语音到文本数据.我所说的实时，我的意思是，“当我说话的时候，我同时得到文本输出”。我已经使用Google云服务API在Python中实现了语音到文本部分。然后，我使用“子进程”在node.js环境中运行我的python程序。到现在为止一切都很好。接下来，我想在浏览器中显示实时文本.换句话说，我想从python (现在使用子进程在node.js中运行)向web浏览器发送实时文本输出。我正试着用socket.io做这件事。下面是我的服务器端(node.js)代码，其中还应用了socket.io：
const express = require('express');
//const router = express.Router();
const {spawn} = require('child_process');
const path = require('path');
const app = express();
const http = require('http');
const server = http.createServer(app);
//const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);
function runScript(){
return spawn('python3', [
"-u",
path.join(__dirname, 'script.py')
]);
}
const subprocess = runScript()
// print output of the script
app.get('/', (req,res) => {
res.sendFile(__dirname + '/index.html');
});
io.on('connection', (socket) => {
subprocess.stdout.on('data', (data) => {
//console.log(`data:${data}`);
socket.on('message', (data) => {
socket.broadcast.emit('message', data);
});
});
});
server.listen(3000, () => {
console.log('listening on *:3000');
});上面，我首先使用子进程调用node.js中的python程序，然后使用socket.broadcast.emit将python程序的文本输出发送到我的客户端。客户端代码如下所示：
<!DOCTYPE html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
var messages = document.getElementById('messages');
//const EventEmitter = require('events');
//const emitter = new EventEmitter()
//emitter.setMaxListeners(50)
socket.on('messages', function(data) {
document.querySelector("#style1".innerHTML = `<p>${data1}</p>`
});
</script>
</head>
<body id="messages">
<h1> This is crazy </h1>
<div id="style1">
</div>
</body>
</html>上面，我想在标签中显示python程序的实时文本输出。问题是，我无法在网络浏览器中得到任何东西。我的目标是，我想在网页浏览器中实时显示我所说的任何文字。
我对socket.io不太了解。事实上，这是我第一次使用这种技术。
回答 1
Stack Overflow用户
发布于 2021-04-27 17:06:54
您的Node.js服务器将充当套接字服务器。如您的代码所示，它侦听套接字连接的端口，在连接上创建套接字，然后发送消息。从简单的粗略回顾来看，服务器代码看起来还可以。
在您的网页上，您正在创建套接字，并侦听消息。
然而，在网页上运行的套接字还没有连接到服务器，这就是为什么现在还没有任何工作。
假设您正在本地主机上执行此操作，只需将套接字服务器地址添加到它的构造函数中，然后侦听连接。
const socket = io('ws://localhost:3000');
socket.on('connect', () => {
// do any authentication or handshaking here.
console.log('socket connected');
});更高级的实现应该优雅地处理关闭套接字。
根据以下评论：
，我添加了上面建议的行。即使是现在，网页上也看不到任何内容，但是我收到了这样的警告：(节点:14016) MaxListenersExceededWarning:可能检测到的EventEmitter内存泄漏。添加了11个消息侦听器。使用emitter.setMaxListeners()增加限制
仔细观察您的服务器代码，我相信这是根本问题。
subprocess.stdout.on('data', (data) => {
//console.log(`data:${data}`);
socket.on('message', (data) => {
socket.broadcast.emit('message', data);
});
});
});每次从subprocess.stdout接收数据时，都要向套接字中添加一个新的onmessage事件处理程序，因此在一段时间后，您添加了太多的事件处理程序。
重写您的逻辑，以便只添加一次socket.on('message') (通常在创建套接字之后)。
还值得注意的是，在上面的代码中，没有使用stdout中的data，因为data变量正在由onmessage函数在较低的范围内重新定义。由于数据正在被重新定义，Python程序的输出将被忽略。
我想这就是你想要的：
//echo any message you receive from the socket back to the socket
socket.on('message', (data) => {
socket.broadcast.emit('message', data);
});
//send data from std out to the socket.
subprocess.stdout.on('data', (data) => {
//console.log(`data:${data}`);
socket.broadcast.emit('message', data);
});https://stackoverflow.com/questions/67283553
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号