Javascript Socket.io with PubSub：在多页刷新后显示的实时数据更少或没有

我正在尝试使用GooglePubSub、NodeJS和GoogleAppEngine可视化流数据。我所做的只是：

使用python脚本每隔1秒将消息流推送到PubSub主题 创建对该主题的订阅 创建一个简单的web应用程序，用于侦听订阅、解析每个传入消息，并使用node js、socket.io和fusionchart以实时条形图的形式显示给浏览器 我遵循了本教程：，唯一的区别是我使用了PubSub而不是PubNub，同时遵循了以下文档：对于“接收消息”部分

事实上，当我每1秒发布10条消息时，图表将每1秒实时显示10条消息。这是我运行应用程序时图表的外观：

问题是，它只在我第一次运行应用程序并打开页面时起作用。当我刷新页面并推送另外10条新消息时，数据显示的时间更长。当它最终出现时，仅显示10条消息中的5条。如果我尝试刷新同一页面，显示的数据会越来越少，甚至在某个点上不会显示任何数据

我通过我的控制台跟踪每个传入和传出的消息，似乎一切都很好。推送10条消息，接收10条消息。只是出于某种原因，每次刷新后显示的内容越来越少

以下是我的app.js代码：

var express=需要“express”； var app=需要“快递”； var http=require'http'.Serverapp； //创建连接到http服务器的新socket.io实例。 var io=require'socket.io'http； //导入Google云客户端库 const PubSub=require'@googlecloud/PubSub'； //您的Google云平台项目ID const projectd='myprojecthere'； //提供dist目录的绝对路径。 app.useexpress.static__dirname+/dist'； //在获取请求时，将“index.html”页面作为响应发送。 app.get'/'，functionreq，res{ res.sendFile_uudirname+'/index.html'； }; //无论何时有人连接，这都会被执行 //原件：连接 io.on'connection'，函数套接字{ console.log“输入io连接”； 控制台。日志“%s套接字已连接”，io.engine.CLIENTSCONT //实例化客户机 const pubsub=新的pubsub{ projectd:projectd， 关键词：审查 }; var-strData； /** *TODEDeveloper：取消注释以下行以运行示例。 * https://cloud.google.com/pubsub/docs/pullpubsub-pull-messages-async-nodejs */ const subscriptionName='testing_subscription'； const topicName=‘测试’； 常数超时=50； //引用现有订阅 //var topic=pubsub.topictopicName const subscription=pubsub.subscriptionsubscriptionName； //函数设置时间和日期的格式 函数formatDatetime时间戳{ var formatted=TimeStamp.getHours+'：'+TimeStamp.getMinutes+'：'+TimeStamp.getSeconds+'：'+TimeStamp.getmillides； 返回格式； } //创建一个事件处理程序来处理消息 让messageCount=0； const messageHandler=message=>{ log`Received message:${message.id}`； console.log`\tData:${message.data}`； console.log`\t属性：${message.attributes}`； var obj=JSON.parsemessage.data； console.log`\tTimeStamp:${obj.messages.timestamp}`； console.log`\tAmount:${obj.messages.amount}`； messageCount+=1； log`messageCount:${messageCount}`； message.ack； console.log“消息已确认”； //这不会确认消息，但允许检索更多消息 //如果您的限制已达到或您不想确认消息。 //message.nack； //获取创建时间戳 var x=新的Dateobj.messages.timestamp； //图表中x轴的时间格式 var formatted=formatDatetimex； var Count=obj.messages.amount； log`提取时间戳：${formatted}`； log`Counts:${Count}`； strData={label:已格式化， 值：计数 } socket.emit'news'，strData； console.log`； }; //侦听新消息，直到达到超时 subscription.on`message`，messageHandler； 设置超时=>{ console.log`Enter timeout`； //removeListener'message'，messageHandler； console.log“收到0条消息。”； var x=新日期； var formatted=formatDatetimex； var计数=0； console.log`提取时间戳：${formatted}` strData={label:已格式化， 值：计数 } console.log`strData:${strData}` console.log`； socket.emit'news'，strData； }，超时； //其他处理 如果strData的类型==‘未定义’{ 清汤 还有别的事发生了` var x=新日期； var formatted=formatDatetimex； console.log`提取时间戳：${formatted}` strData={label:已格式化， 数值：9 } socket.emit'news'，strData； } log`strData:${strData}`； console.log`； }; //服务器侦听端口8080 http.listen8080，函数{ console.log“监听*：8080”；

---

}; 我碰巧找到了解决我自己问题的有效方法

不完全确定原因，但发生的情况如下：每当我刷新页面时，旧的套接字连接将被断开，并将创建一个新的套接字连接。此新套接字将侦听相同的订阅

尽管旧套接字的状态在页面刷新期间似乎已断开连接，但出于某些原因，它仍侦听相同的订阅。这将导致10条消息在两个或多个连接之间拆分，具体取决于页面刷新的次数

但是，浏览器上显示的只是最新的连接。这可能看起来消息丢失了，但实际上它们分布在许多看不见的连接上。当我试图打印每个消息都以“Socket ID”结尾的“Socket ID”时，这一点很明显

因此，我所做的基本上是在套接字断开期间添加一个小处理：

//on Disconnect
socket.on('disconnect', function () {
console.log("LOG: just disconnected: " + socket.id);
subscription.removeListener('message', messageHandler);

因此，每当套接字断开连接时，它也将停止侦听订阅，新套接字将收到一整套消息