WebSockets

3 files changed, 67 insertions, 4 deletions

diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index 66e7f804..916de003 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -33,6 +33,14 @@ export default class Chat extends React.Component {
         }
     }
 
+    onMessage = (msg) => {
+        if (msg.user.uname === this.props.match.params.user) {
+            this.setState({
+                chats: [msg, ...this.state.chats]
+            });
+        }
+    }
+
     onSend = (template) => {
         pm(template.to.uname, template.body)
             .then(res => {
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 63359ce0..0ec39d11 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -56,6 +56,13 @@ export default class Thread extends React.Component {
       active: msg.rid || 0
     })
   }
+  onReply = (msg) => {
+    if (msg.mid == this.state.msg.mid) {
+      this.setState({
+        replies: [...this.state.replies, msg]
+      })
+    }
+  }
   postComment = (template) => {
     const { mid, rid, body, attach } = template;
     comment(mid, rid, body, attach).then(res => {
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 2bade756..1eb01eae 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -23,7 +23,7 @@ class App extends React.Component {
     super(props);
     let params = qs.parse(window.location.search)
     if (params.hash) {
-      localStorage.visitor = JSON.stringify({uid: 0, hash: params.hash});
+      localStorage.visitor = JSON.stringify({ uid: 0, hash: params.hash });
       window.history.replaceState({}, document.title, `${window.location.protocol}//${window.location.host}${window.location.pathname}`)
     }
     this.state = {
@@ -32,10 +32,58 @@ class App extends React.Component {
         hash: params.hash || ''
       }
     };
+    this.pm = React.createRef();
+    this.thread = React.createRef();
+  }
+
+  initWS = () => {
+    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const params = { hash: this.state.visitor.hash };
+    let url = `${proto}//api.juick.com/ws/?${qs.stringify(params)}`;
+    this.ws = new WebSocket(url);
+    this.ws.onopen = () => {
+      console.log("online");
+    }
+    this.ws.onclose = () => {
+      console.log('offline');
+      this.ws = false;
+      setTimeout(function () {
+        this.initWS();
+      }, 2000);
+    }
+    this.ws.onmessage = (msg) => {
+      if (msg.data == ' ') {
+        this.ws.send(' ');
+      } else {
+        try {
+          var jsonMsg = JSON.parse(msg.data);
+          console.log('data: ' + msg.data);
+          if (jsonMsg.service) {
+            return;
+          }
+          if (!jsonMsg.mid) {
+            this.pm.current.onMessage(jsonMsg);
+          }
+          if (jsonMsg.rid && this.thread.current) {
+            this.thread.current.onReply(jsonMsg);
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      }
+    };
+    setInterval(this.wsSendKeepAlive, 90000);
+  }
+
+  wsSendKeepAlive = () => {
+    if (this.ws) {
+      this.ws.send(' ');
+    }
   }
 
   componentDidMount() {
-    const {hash, uid} = this.state.visitor;
+    const { hash, uid } = this.state.visitor;
+    this.initWS();
     if (uid === 0 && hash) {
       me().then(visitor => this.auth(visitor))
     }
@@ -92,10 +140,10 @@ class App extends React.Component {
                 } />
                 <Route exact path="/post" render={(props) => <Post visitor={user} {...props} />} />
                 <Route exact path="/pm" render={(props) => <Contacts visitor={user} {...props} />} />
-                <Route exact path="/pm/:user" render={(props) => <Chat visitor={user} {...props} />} />
+                <Route exact path="/pm/:user" render={(props) => <Chat ref={this.pm} visitor={user} {...props} />} />
                 <Route exact path="/:user" render={(props) => <Blog visitor={user} {...props} />} />
                 <Route exact path="/tag/:tag" render={(props) => <Tag visitor={user} {...props} />} />
-                <Route exact path="/:user/:mid" render={(props) => <Thread visitor={user} {...props} />} />
+                <Route exact path="/:user/:mid" render={(props) => <Thread ref={this.thread} visitor={user} {...props} />} />
               </Switch>
             </section>
             <aside id="column">