Nodejs: Realtime election Application via live chat tiktok

Randi Eka Setiawan
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>

Sign up to discover human stories that deepen your understanding of the world.

Randi Eka Setiawan
Randi Eka Setiawan

Written by Randi Eka Setiawan

Software Engineer at scola.id • I am a Rust enthusiast with a passion for learning and exploring all that this powerful programming language has to offer.

No responses yet

Write a response