aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-30 23:31:03 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:53 +0300
commit61523ca4d0eb3a718e9b029bd3e121f3b539b3b1 (patch)
treeedeb7b90c62ae4d36233fb8e6cc7f1400f0efd1d /vnext
parentfd7dd62c2f08ec993ac2c30f537a53d8e37cff24 (diff)
WebSockets
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/components/Chat.js8
-rw-r--r--vnext/src/components/Thread.js7
-rw-r--r--vnext/src/index.js56
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">