Frontend: Build basic UI for sending and receiving messages #5

New Issue

binaryDiv · 2019-01-20T06:16:40+01:00

binaryDiv commented

2019-01-20 06:16:40 +01:00

The Client class (js/client.js) implements the communication between the web client and the server over WebSockets. It offers functions like .sendMessage() to send commands to the server, and events that can be subscribed with .on() to receive data and status information like 'connected' or 'new message' from the server. (The event system is not quite finished yet, see #4.)

Now we need a user interface that interacts with this class. :)

I'll provide a UI class stub (js/ui.js) as an example for how to use the Client class (subscribe to events and log to the console or something).

Display messages. Messages are received by subscribing the receiveMessage event. The event handler gets the message content as an object (eg. {'from': 'Lexi', 'text': 'Meow meow.'}). These messages need to be displayed in some kind of chat log.
Send messages. An input field for the user to write new messages. Call client.sendMessage(text) to send the message to the server. (The server will then send the message to all users, including the one who sent it.)
(Optional for now.) Initialization and other stuff. The UI should ask the user for their nickname before starting the chat, show the connection status (error if the connection is lost), and so on. But let's focus on sending and receiving messages for now! -> Another issue.

The `Client` class (*js/client.js*) implements the communication between the web client and the server over WebSockets. It offers functions like `.sendMessage()` to send commands **to** the server, and events that can be subscribed with `.on()` to receive data and status information like 'connected' or 'new message' **from** the server. *(The event system is not quite finished yet, see #4.)* Now we need a user interface that interacts with this class. :) I'll provide a `UI` class stub (*js/ui.js*) as an example for how to use the `Client` class (subscribe to events and log to the console or something). 1. **Display messages.** Messages are received by subscribing the `receiveMessage` event. The event handler gets the message content as an object (eg. `{'from': 'Lexi', 'text': 'Meow meow.'}`). These messages need to be displayed in some kind of chat log. 2. **Send messages.** An input field for the user to write new messages. Call `client.sendMessage(text)` to send the message to the server. (The server will then send the message to all users, including the one who sent it.) 3. *(Optional for now.)* **Initialization and other stuff.** The UI should ask the user for their nickname before starting the chat, show the connection status (error if the connection is lost), and so on. But let's focus on sending and receiving messages for now! -> *Another issue.*

binaryDiv added this to the Basic functionality milestone 2019-01-20 06:16:40 +01:00

yamipanther was assigned by binaryDiv

2019-01-20 06:16:40 +01:00

binaryDiv added the

Component/Frontend

main feature

labels 2019-01-20 06:16:40 +01:00

binaryDiv added a new dependency 2019-01-20 06:16:54 +01:00

#4 Client: Event system

binaryDiv added a new dependency 2019-01-20 06:22:21 +01:00

#6 Frontend: Write a stub class UI

binaryDiv commented