Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to...

29
Chatting with Web Sockets

Transcript of Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to...

Page 1: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chatting with Web Sockets

Page 2: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Task: Write a Web Socket Server for Direct Messages (DMs)

Lecture Question

In a package named server, write a class named DMServer that:

• When created, sets up a web socket server listening for connections on localhost:8080

• Listens for messages of type "register" containing a username as a String (Use data structures to remember which socket belongs to which username)

• Listens for messages of type "direct_message" containing a JSON string in the format {"to":"username", "message":"text"}. When such a message is received:

• Send a message of type "dm" to the "to" username containing a JSON string in the format {"from":"username", "message":"text"}

• Example: If 2 different users connect to the server and send:

• emit("register", "Aesop") and emit("register", "Rob")

• User "Aesop" sends emit("direct_message", '{"to": "Rob", "message": "Happy to be on the food chain at all"}')

• User "Rob" will receive a message from the server of type "dm" containing the string '{"from": "Aesop", "message": "Happy to be on the food chain at all"}'

Page 3: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

• Let's build a chat app!

• Code is in the repo

• Users can connect to the chat server

• Use a web or desktop front end

• Server doesn't care what type of app a client is using

• All connected users can communicate through text messages

Chat Demo

Page 4: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat Architecture

Web Client

Desktop Client

Chat Server

MySQL Database

SQL StatementsWeb Sockets

Page 5: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Client Chat Server

MySQL Database

• Chat server starts up

• Listens for WebSocket connections on port 8080

• Initialize data structures that will store reference to each WebSocket

Page 6: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Client Chat Server

MySQL Database

• Server connects to a MySQL database to store the chat history

• Communicates via SQL statements

• MySQL reacts to the event of receiving a statement

• More details on MySQL in a later lecture

Page 7: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Client Chat Server

MySQL Database

• Clients connect to the server using WebSockets

• Client could be web or desktop

• After the connection is established:

• Client sends a message of type register containing their username

register

Page 8: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Client Chat Server

MySQL Database

• The server receives the register message and reacts to this event

• Adds the new user to the data structures

• Data structure remember the username associated with this socket

• Retrieve the chat history from the database and send it to the client

register

chat_history

SELECT *

Page 9: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Client Chat Server

MySQL Database

• Client reacts to the chat_history message

• Renders all the content and displays it to the user

chat_history

Page 10: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Chat Server

MySQL Database

• Multiple clients can be connected simultaneously

• Each client sends their username in a register message

• Chat servers maps usernames to sockets for all connections

Client

Client

Client

Page 11: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Chat Server

MySQL Database

• All users can send messages of type chat_message to the server

Client

Client

Client

chat_message

Page 12: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Chat Server

MySQL Database

• All users can send messages of type chat_message to the server

• Message is sent when a user sends a message using the GUI

• This message only contains the message (No username)

Client

Client

Client

chat_message

Page 13: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Chat Server

MySQL Database

• When the server receives a chat_message:

• Lookup the username for the sending socket

• Store username/message in the database

• Send username/message to all connected sockets in a message of type new_message

Client

Client

Client

chat_message

new_message

INSERT

Page 14: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Chat Server

MySQL Database

• Clients receives the new_message

• Add it to the GUI for the user to read

Client

Client

Client

new_message

Page 15: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Chat App

Chat Server

MySQL Database

• When a client disconnects the server reacts to the disconnect event

• Remove the user from data structures

Client

Client

Client

disconnect

Page 16: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

To the Code

Page 17: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker Architecture

Client Chat Server

Game Actor

Actor System

Page 18: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App

Client Clicker Server

Game Actor

• When the app starts

• An actor system is created

• A ClickerServer actor is added to the system

• UpdateGames message is sent to the server at regular intervals

Actor System

UpdateGames

Page 19: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App

Client Game Actor

• When a client connects and chooses a username

• This username is sent to the server in a WebSocket message of type startGame

Actor System

UpdateGames

Clicker Server

startGame

Page 20: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App

Client Game Actor

• In response to receiving the gameStart message, the server:

• Sends the client the game configuration in a message of type initialize

• Creates a GameActor in the actor system

• Updates data structure to remember that this game actor is associated with this web socket

Actor System

UpdateGames

Clicker Server

initialize

Page 21: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App

Client Game Actor

• To create a new Actor

• Use the context variable of any actor

• Use this context the same as the actor system

• Ex. clickerServer.context.actorOf...Actor System

UpdateGames

Clicker Server

Page 22: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App• An new game actor is created for

each connected client

• Important to update all data structures to associate clients with their actors

Actor System

UpdateGames

Clicker ServerClient

Client

ClientGame Actor

Game Actor

Game Actor

Page 23: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App• When the server receives click and buy

message from a web socket

• Forward the action as an actor message to the appropriate actor

• Game actor will update its state according to the configuration of the game

Actor System

UpdateGames

Clicker ServerClient

Client

ClientGame Actor

Game Actor

Game Actor

click Click

Page 24: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App - Update• Each time the clicker server

receives the UpdateGames actor message

• Send an Update message to each game actor

Actor System

UpdateGames

Clicker ServerClient

Client

ClientGame Actor

Game Actor

Game ActorUpdate

UpdateUpdate

Page 25: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App - Update• Each game actor responds with

the GameState message (to the sender())

• GameState contains all information of the game in a JSON string

Actor System

UpdateGames

Clicker ServerClient

Client

ClientGame Actor

Game Actor

Game ActorGameState

GameStateGameState

Page 26: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App - Update• The clicker server forwards each game

state to the appropriate client in a gameState message

• Each client parses the JSON string and updates the GUI for the user to see

Actor System

UpdateGames

Clicker ServerClient

Client

ClientGame Actor

Game Actor

Game Actor

gameState

gameState

gameState

Page 27: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App - Update• This update process occurs at regular intervals

• 10 times/second in the handout code

• Notice that all the game logic occurs on the server

• Client only sends user inputs and renders the game state

Actor System

UpdateGames

Clicker ServerClient

Client

ClientGame Actor

Game Actor

Game Actor

Page 28: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Clicker App - Expansion• Expansion objective - AutoSave

• Send messages to save all games at regular intervals

• Store all game states in a way that will persist

• If a user sends the startGame message with a username that has a saved game, load their game

Actor System

UpdateGames SaveGames

Clicker ServerClient

Client

ClientGame Actor

Game Actor

Game ActorMySQL

Database (Or file IO)

Page 29: Chatting with Web Sockets App - Expansion • Expansion objective - AutoSave • Send messages to save all games at regular intervals • Store all game states in a way that will persist

Task: Write a Web Socket Server for Direct Messages (DMs)

Lecture Question

In a package named server, write a class named DMServer that:

• When created, sets up a web socket server listening for connections on localhost:8080

• Listens for messages of type "register" containing a username as a String (Use data structures to remember which socket belongs to which username)

• Listens for messages of type "direct_message" containing a JSON string in the format {"to":"username", "message":"text"}. When such a message is received:

• Send a message of type "dm" to the "to" username containing a JSON string in the format {"from":"username", "message":"text"}

• Example: If 2 different users connect to the server and send:

• emit("register", "Aesop") and emit("register", "Rob")

• User "Aesop" sends emit("direct_message", '{"to": "Rob", "message": "Happy to be on the food chain at all"}')

• User "Rob" will receive a message from the server of type "dm" containing the string '{"from": "Aesop", "message": "Happy to be on the food chain at all"}'