Finish websocket chat on server and in app

Author: yamalight

chat-server/index.js

@@ -7,7 +7,7 @@ const app = express();
 // apply websockets to express
 setupWs(app);
 
-const clients = [];
+// chat sessions storage
 const chatSessions = {};
 
 // setup route
@@ -18,24 +18,37 @@ app.ws('/:series/:episode', (ws, req) => {
   const chatKey = series + episode;
 
   if (!chatSessions[chatKey]) {
-    chatSessions[chatKey] = [];
+    chatSessions[chatKey] = {
+      clients: [],
+      messages: [],
+    };
   }
+  // alias it
+  const session = chatSessions[chatKey];
 
   // assign index and store in memory db
   ws.uuid = clientId;
-  clients.push(ws);
+  session.clients.push(ws);
 
   ws.on('message', msg => {
     console.log(msg);
+    session.messages.push(msg);
+    session.clients.forEach(w => w.send(msg));
   });
 
   ws.on('close', () => {
-    const clientIndex = clients.findIndex(c => c.uuid === clientId);
-    clients.splice(clientIndex, 1);
-    console.log('Client disconnected:', clientId, clients);
+    const clientIndex = session.clients.findIndex(c => c.uuid === clientId);
+    session.clients.splice(clientIndex, 1);
+    console.log('Client disconnected:', clientId, session.clients);
+    if (session.clients.length === 0) {
+      session.messages = [];
+    }
   });
 
-  console.log('New connection for', series, episode, 'with client:', clientId, '\n', clients);
+  console.log('New connection for', series, episode, 'with client:', clientId, '\n', session.clients);
+  session.messages.forEach(msg => ws.send(msg));
 });
 
-app.listen(3000);
+app.listen(3000, () => {
+  console.log('listening on :3000');
+});

src/api/index.js

@@ -5,4 +5,4 @@ import Youtube from './youtube';
 // manager
 import PluginManager from './manager';
 
-export default new PluginManager([Crunchyroll, Youtube]);
+export default new PluginManager([Crunchyroll]); //, Youtube]);

src/components/chat/index.js

@@ -1,23 +1,34 @@
 // npm packages
 import React from 'react';
 
+// our packages
+import Message from './message';
+
 export default class Chat extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
       episode: props.episode,
+      connected: false,
+      username: undefined,
+      messages: [],
     };
   }
 
   componentWillReceiveProps(nextProps) {
     if (nextProps.episode && (!this.state.episode || nextProps.episode._id !== this.state.episode._id)) {
-      this.setState({episode: nextProps.episode}, () => {
+      this.setState({episode: nextProps.episode, messages: [], connected: false}, () => {
         this.connectToServer();
       });
     }
   }
 
+  setUsername() {
+    const username = this.usernameInput.value;
+    this.setState({username});
+  }
+
   connectToServer() {
     const {episode} = this.state;
 
@@ -26,34 +37,96 @@ export default class Chat extends React.Component {
     this.socket = new WebSocket(url);
 
     // Connection opened
-    // this.socket.addEventListener('open', event => {
-    // this.socket.send('Hello Server!');
-    // });
+    this.socket.addEventListener('open', () => this.setState({connected: true}));
 
     // Listen for messages
     this.socket.addEventListener('message', event => {
-      console.log('Message from server', event.data);
+      const message = JSON.parse(event.data);
+      console.log('Message from server', message);
+      const {messages: oldMessages} = this.state;
+      const messages = oldMessages.concat([message]).sort((a, b) => a.date < b.date);
+      this.setState({messages});
     });
   }
 
+  sendMessage() {
+    const message = this.messageInput.value;
+
+    if (!message || message.length < 3) {
+      return;
+    }
+
+    this.messageInput.value = '';
+    this.socket.send(JSON.stringify({user: this.state.username, message, date: new Date()}));
+  }
+
+  handleMessageKey(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.sendMessage();
+      return false;
+    }
+
+    return true;
+  }
+
   render() {
+    const {username, messages, connected} = this.state;
+
+    if (!connected) {
+      return (
+        <div className="column" style={{width: 340, maxWidth: 340, display: 'flex', flexDirection: 'column'}}>
+          Connecting..
+        </div>
+      );
+    }
+
     return (
       <div className="column" style={{width: 340, maxWidth: 340, display: 'flex', flexDirection: 'column'}}>
-        <div className="is-flex" style={{flexGrow: 1}}>
-          Chat history
-        </div>
-        <div className="is-flex">
-          <div className="field has-addons" style={{flexGrow: 1}}>
-            <p className="control" style={{flexGrow: 1}}>
-              <input className="input" type="text" placeholder="Send a message.." />
-            </p>
-            <p className="control" style={{marginRight: 10}}>
-              <a className="button is-info">
-                Send
-              </a>
-            </p>
-          </div>
+        <div className="is-flex" style={{flexGrow: 1, flexDirection: 'column'}}>
+          {messages.map((m, i) => <Message key={`msg_${i}`} message={m} />)}
         </div>
+        {username &&
+          <div className="is-flex">
+            <div className="field has-addons" style={{flexGrow: 1}}>
+              <p className="control" style={{flexGrow: 1}}>
+                <input
+                  className="input"
+                  type="text"
+                  placeholder="Send a message.."
+                  ref={m => {
+                    this.messageInput = m;
+                  }}
+                  onKeyUp={e => this.handleMessageKey(e)}
+                />
+              </p>
+              <p className="control" style={{marginRight: 10}}>
+                <a className="button is-info" onClick={() => this.sendMessage()}>
+                  Send
+                </a>
+              </p>
+            </div>
+          </div>}
+        {!username &&
+          <div className="is-flex">
+            <div className="field has-addons" style={{flexGrow: 1}}>
+              <p className="control" style={{flexGrow: 1}}>
+                <input
+                  className="input"
+                  type="text"
+                  placeholder="Pick a username.."
+                  ref={u => {
+                    this.usernameInput = u;
+                  }}
+                />
+              </p>
+              <p className="control" style={{marginRight: 10}}>
+                <a className="button is-primary" onClick={() => this.setUsername()}>
+                  Set username
+                </a>
+              </p>
+            </div>
+          </div>}
       </div>
     );
   }

src/components/chat/message.js

@@ -0,0 +1,22 @@
+// npm packages
+import React from 'react';
+
+export default ({message}) => {
+  const date = new Date(message.date);
+
+  return (
+    <article className="media">
+      <div className="media-content">
+        <div className="content">
+          <p>
+            <strong>{message.user}</strong>
+            {' '}
+            <small>{date.toLocaleTimeString()} {date.toLocaleDateString()}</small>
+            <br />
+            {message.message}
+          </p>
+        </div>
+      </div>
+    </article>
+  );
+};