Chat Room Connection
Hard · Effects
The starter has a fake chat server: server.connect(room, onMessage) opens a connection that calls onMessage(text) every 100ms, and returns a function that closes it. ConnectionStatus is finished and shows how many connections are open.
Build ChatRoom({ room }):
- connect in an effect when it mounts and whenever room changes, and close the old connection in the cleanup
- show <h2>Room: general</h2> and the received messages as <li> items in <ul className="messages">, oldest first
- a new room starts with an empty list
App has <select className="room"> (general, travel, music) and a button "Hide chat" / "Show chat" that unmounts and mounts ChatRoom. There is never more than one open connection, and none while the chat is hidden.