# KKVote  Vote for songs on Listen With ---- ## Outline 1. Intro. 2. Tech Overview 3. KKBOX Open API 4. Websocket 5. Conclusion --- ## Intro  https://kkvote.herokuapp.com/client.html --- ## Tech Overview  Node.js | Express | Websocket | Open API | Heroku --- ## KKBOX Open API [Javascript SDK](https://github.com/KKBOX/OpenAPI-JavaScript) - Client Credentials Flow - `/artists/:artist_id/top-tracks` - `/search` ---- ### Client Credentials Flow  ---- ```javascript= const auth = new kkbox.Auth(CLIENT_ID, CLIENT_SECRET); const response = await auth .clientCredentialsFlow .fetchAccessToken(); const api = new kkbox.Api(response.data.access_token); ``` `access_token`: `oMv1edfDVDF0i9mAT5M3bQ==` ---- ### ArtistFetcher Fetch top tracks belong to an artist ```javascript= const response = await api .artistFetcher .setArtistID(ARTIST_ID) .fetchTopTracks(); const tracks = [...response.data.data]; ``` ---- ### SearchFetcher Search for various objects (track, album, ...) ```javascript= const response = await api.searchFetcher .setSearchCriteria('派對動物 五月天', 'track') .filter({ artist: '五月天', availableTerritory: 'TW' }) .fetchSearchResult(); const { name, id } = response.data.tracks.data[0]; ``` --- ## Websocket  ---- ### HTTP/HTTPS vs. WS/WSS  ---- ### HTTP Login Polling  ---- ### Websocket  ---- Client sends WebSocket **handshake request** ```j GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw== Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Origin: http://example.com ``` ---- Server returns WebSocket **handshake response** ```j HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk= Sec-WebSocket-Protocol: chat ``` ---- ### Server Sample [websockets/ws](https://github.com/websockets/ws) ```javascript= const WebSocket = require('ws'); const wss = new WebSocket.Server({ port: 8080 }); wss.on('connection', (ws) => { ws.on('message', (message) => console.log('server received: %s', message)); ws.send('Hi 粉絲'); // Send message to client }); ``` ``` server received: Hi 五月天 ``` ---- ### Client Sample ```javascript= const ws = new WebSocket('ws://localhost:8080'); ws.onopen = () => ws.send('Hi 五月天'); // Send message to server ws.onmessage = (message) => console.log('client received: %s', message); ``` ``` client received: Hi 粉絲 ``` --- ## Conclusion