const Pusher = require('pusher'); const pusher = new Pusher({ appId: process.env.PUSHER_APP_ID, key: process.env.PUSHER_APP_KEY, secret: process.env.PUSHER_APP_SECRET, cluster: process.env.PUSHER_APP_CLUSTER, encrypted: true, }); function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min) + min); } function increment() { const num = getRandomNumber(0, poll.length); poll[num].votes += 20; } function updatePoll() { setInterval(() => { increment(); pusher.trigger('poll-channel', 'update-poll', { poll, }); }, 1000); }
然后将/ poll端点更改为如下所示：
app.get('/poll', (req, res) => { res.json(poll); updatePoll(); });
/ poll路由将初始轮询数据发送到客户端并调用updatePoll（）函数，该函数以三秒为间隔递增随机俱乐部的投票，并触发我们在最后一步中在客户端上创建的轮询频道的更新。
通过从项目目录的根目录运行节点server.js，终止服务器并重新启动它。此时，您应该有一个实时更新的条形图。
结论
您已经看到了使用D3.js创建条形图的过程以及如何使用Pusher Channels实时创建条形图。
我们已经为Pusher和D3提供了一个简单的用例，但其中一个仅仅是表面上的问题。我建议深入研究docs，了解更多有关Pusher及其他功能的信息。
谢谢阅读！您可以在GitHub存储库中找到本教程的完整源代码。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: