Nodejs: Realtime election Application via live chat tiktok
2 min readFeb 15, 2024
The Indonesian presidential election is coming soon, so I have the idea to create a voting application via comment tiktok.
Surprisingly I got 66 thousand views and 900 new followers, can be seen in the image below.
And here’s the YouTube version of the tutorial:
The plan is
- The application was created using nodejs, using 2 packages, namely express and tiktok-live-connector
- The application will stream all chats on live TikTok.
- The chat that is streamed will be checked to determine which presidential candidate
- Create an API to provide temporary calculation results
- Frontend uses VueJS to make dom manipulation easier
The Code
{
"name": "pemiloktiktok2024",
"version": "1.0.0",
"main": "index.js",
"author": "randi eka setiawan",
"license": "MIT",
"type": "module",
"dependencies": {
"express": "^4.18.2",
"tiktok-live-connector": "^1.1.2"
}
}// index.js
import express from 'express'
import { WebcastPushConnection } from 'tiktok-live-connector'
let capres = {
'anies': 0,
'prabowo': 0,
'ganjar': 0,
}
const app = express()
app.use(express.static('public'))
app.get('/suara', (req, res)=>{
res.send(capres)
})
app.listen(3000, ()=>{
const tiktok = new WebcastPushConnection('randiekas_')
tiktok.connect().then((state)=>{
console.log("Berhasil terhubung ke tiktok")
}).catch((e)=>{
console.log(e.toString())
})
tiktok.on("chat", (data)=>{
console.log(data)
if( data.comment == 1){
capres.anies += 1
}else if( data.comment == 2){
capres.prabowo += 1
}else if( data.comment == 3){
capres.ganjar += 1
}
return
})
console.log("Aplikasi sudah siap digunakan")
})<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
{{capres}}
<p>Anies: {{ capres.anies }}</p>
<p>Prabowo: {{ capres.prabowo }}</p>
<p>Ganjar: {{ capres.ganjar }}</p>
</div>
</body>
<script>
const { createApp, ref } = Vue
createApp({
data() {
return {
capres: {
'anies': 0,
'prabowo': 0,
'ganjar': 0,
}
}
},
mounted: function(){
setInterval(()=>{
axios
.get('/suara')
.then( (response)=>{
// handle success
console.log(response.data)
this.capres = response.data
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(()=>{
// always executed
});
}, 2000)
},
}).mount('#app')
</script>
</html>
