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.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

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