Websockets & the Discord Gateway Websockets and teh Discord Gateway A CSE154 Exploration Session by Jeremy Zhang But first... we must take attendance! https://staff.washington.edu/jkzhang/attendance A bit about the attendance webapp MaterializeCSS theme PHP & MySQL Backend CSE154 topics friendly :) https://staff.washington.edu/jkzhang/attendance Password: rainbowdash Request Techniques Regular HTTP A client requests a webpage from a server. The server calculates the response. The server sends information back to the client (computer). AJAX Polling A client requests a webpage from a server using regular HTTP request. (First method) The requested webpage executes JavaScript which requests a file from the server at regular intervals (e.g. 0.5 seconds). The server calculates each response and sends it back. Eg: ChatIt AJAX Long-Polling A client requests a webpage from a server using regular HTTP request. (First method) The requested webpage executes JavaScript which requests a file from the server. The server does not immediately respond with the requested information but waits until there's new information available. When there's new information available, the server responds with the new information. The request is done. The client receives the new information and immediately sends another request to the server, re-starting the process. Eg: Google Docs HTML5 Server Sent Events (SSE) / EventSource A client requests a webpage from a server using regular HTTP (First method). The requested webpage executes javascript which opens a connection to the server. The server sends an event to the client when there's new information available. AJAX Long-Polling, but more modern. Eg: Stock Tickers HTML5 Websockets A client requests a webpage from a server using regular HTTP (First method). The requested webpage executes JavaScript which opens a connection with the server. The server and the client can now send each other messages when new data (on either side) is available. Eg: The ".io games" Discord Websockets vs SSE Headers are sent only once Events! SSE is lightweight However in Websockets, events are fired bidirectional. Websockets is the breadwinner. Websockets demo with Titan Embeds! https://bronytv.net/chat Right into the code! http ---> ws https ---> wss
let ws = new WebSocket("wss://aggie.io/ws");
Initiates a secure websockets with aggie.io/ws page
let ws = new WebSocket("wss://aggie.io/ws");
ws.onmessage = function (message) { ... };
When a message is recieved from the server....
let ws = new WebSocket("wss://aggie.io/ws");
ws.onmessage = function (message) { ... };
ws.onclose = function () { ... };
When the server closes the websocket connection....
let ws = new WebSocket("wss://aggie.io/ws");
ws.onmessage = function (message) { ... };
ws.onclose = function () { ... };
ws.send(" message content here, as a string ");
Sending a message to the server.... Discord Time! Here is the invitation url to the Discord server (If you have a discord account) https://discord.gg/FgdAbzG Setting up a bot token Visit the Discord Developers page Fill in a fun name for your bot Upload an image as the bot icon (cannot be easily changed later, do it now Hit Create App button at the bottom Hit the Create a Bot User button on the page & proceed by hitting the Yes Do It! button From that page, you can see the Client ID under App Details and Token under App Bot User. Copy the client id. Do not share the token. Add the bot to the Exploration Session server with this link below. Paste your client id: , hit enter https://discordapp.com/oauth2/authorize?scope=bot&guild_id=371499513569083417&client_id= Hit Authorize button. For those who don't have a discord account... Feel free to use this token (will be disabled shortly after the exploration session to prevent abuse, sowwy)
a token should be here...
A few small technical details... Websockets is routeless (OP Codes) Heartbeat (We'll just constantly reconnect) Let us begin You are interning at Titan Embeds and your boss has given you three files fresh off the website designer: discord.html discord.css discord.js Your job is to implement a message ticker (similar to a stock ticker) so that your company can display the chat messages at a public television for all to observe. (Kinda like Kane Hall's events television that gets updated throughout the day.) Sample Solution That works! GIST Connect to Discord's websocket Gateway Send login identification Listen for new message events Append them to the DOM
