如何使用socket.io在node.js服务器的客户端(web浏览器)中显示实时数据?

kyxcudwk  于 2021-07-13  发布在  Java
关注(0)|答案(1)|浏览(428)

我想在浏览器中显示实时语音到文本数据。我所说的实时是指,“当我说话的时候,我同时得到文本输出”。我已经使用google云服务api在python中实现了speech-to-text部分。然后我使用“子进程”在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) {
                var item = document.createElement('p');
                item.textContent = data; 
                messages.appendChild(data); 
                window.scrollTo(0, document.body.scrollHeight);
        });
        </script>
        </head>

        <body>
                <h1> This is crazy </h1>
                <p id="messages"> </p>

        </body>

</html>

上面,我想在标记中显示python程序的实时文本输出。问题是,我无法在网络浏览器中获取任何内容。我的目标是,我想在网络浏览器中以文本的形式实时显示我所说的一切。
我对socket.io了解不多。事实上,这是我第一次使用这种技术。

alen0pnh

alen0pnh1#

nodejs服务器将充当套接字服务器。如您的代码所示,它在端口上侦听套接字连接,在连接上创建一个套接字,然后您也可以发送消息。通过简单的粗略检查,服务器代码看起来还不错。
在您的网页上,您正在创建套接字并侦听消息。
然而,网页上运行的套接字还没有连接到服务器,这就是为什么还没有工作。
假设您在localhost上执行此操作,只需将socket服务器地址添加到其构造函数中,然后侦听connect。

const socket = io('ws://localhost:3000');

socket.on('connect', () => {
  // do any authentication or handshaking here.
  console.log('socket connected');
});

更高级的实现应该优雅地处理关闭的套接字。

相关问题