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

1. A client requests a webpage from a server.
2. The server calculates the response.
3. The server sends information back to the client (computer).

AJAX Polling

1. A client requests a webpage from a server using regular HTTP request. (First method)
2. The requested webpage executes JavaScript which requests a file from the server at regular intervals (e.g. 0.5 seconds).
   
3. The server calculates each response and sends it back.

Eg: ChatIt

AJAX Long-Polling

1. A client requests a webpage from a server using regular HTTP request. (First method)
2. The requested webpage executes JavaScript which requests a file from the server.
3. The server does not immediately respond with the requested information but waits until there's new information available.
4. When there's new information available, the server responds with the new information. The request is done.
5. 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

1. A client requests a webpage from a server using regular HTTP (First method).
2. The requested webpage executes javascript which opens a connection to the server.
3. 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

1. A client requests a webpage from a server using regular HTTP (First method).
2. The requested webpage executes JavaScript which opens a connection with the server.
3. 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.

Right into the code!

http ---> ws
https ---> wss

								let ws = new WebSocket("wss://aggie.io/ws");
							

							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

1. Visit the Discord Developers page
2. Fill in a fun name for your bot
3. Upload an image as the bot icon (cannot be easily changed later, do it now
4. Hit Create App button at the bottom
5. Hit the Create a Bot User button on the page & proceed by hitting the Yes Do It! button
6. 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.
7. 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...
						

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

1. Connect to Discord's websocket Gateway
2. Send login identification
3. Listen for new message events
4. Append them to the DOM