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

Why Websockets?

Headers are sent only once

Events are fired bidrectional at an instant.

Events!

Built into modern browsers!

Websockets is the breadwinner.

What is an example of a websocket usage?

Thank you Mike Freeman (INFO 201) for the Chat & Pie demo.

https://github.com/mkfreeman/liveSurvey

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.addEventListener("message", function (message) { ... });
						

When a message is recieved from the server....

							let ws = new WebSocket("wss://aggie.io/ws");
							ws.addEventListener("message", function (message) { ... });
							ws.addEventListener("close", function () { ... });
						

When the server closes the websocket connection....

							let ws = new WebSocket("wss://aggie.io/ws");
							ws.addEventListener("message", function (message) { ... });
							ws.addEventListener("close", 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

(Works even if you do not have an account)

https://discord.gg/FgdAbzG

Setting up a bot token

1. Visit the Discord Developers page and login if needed
2. Click Create an Applicatiton
3. Fill in a fun name for your bot
4. Upload an image as the bot icon
5. Hit Save Changes button at the bottom
6. Copy the Client ID number and save it somewhere temporary so you can retreive it later
7. Visit the Bot tab on the left sidebar.
8. Hit the Add Bot button at the BUILD-A-BOT section & proceed by hitting the Yes Do It! button
9. From that page, you will need to obtain the bot token. It is like a password, so don't share it!
10. Click copy below the token section and save it somewhere temporary so your can retreive it later
11. 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.

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