aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2019-04-17 16:30:29 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit2f9a1f07798f2ed24993034012330ff7893c9716 (patch)
tree5987c11c5731ea218b935559252e76d15fa31d1c
parent24b390cc7b2fb675daaad9ba904cf87b201b0542 (diff)
Fix EventSource
-rw-r--r--vnext/src/App.js35
-rw-r--r--vnext/src/components/Chat.js16
-rw-r--r--vnext/src/components/Thread.js32
3 files changed, 49 insertions, 34 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js
index 4e40f9f1..e461152b 100644
--- a/vnext/src/App.js
+++ b/vnext/src/App.js
@@ -39,25 +39,32 @@ export default function App() {
});
};
- const [es, setEs] = useState();
+ const [es, setEs] = useState({});
+
useEffect(() => {
const { hash } = visitor;
if (hash) {
me().then(visitor => auth(visitor));
- }
- const eventParams = { hash: visitor.hash };
- let url = new URL(`https://api.juick.com/events?${qs.stringify(eventParams)}`);
- let es = new EventSource(url);
- es.onopen = () => {
- console.log('online');
- es.addEventListener('read', updateStatus);
- };
- es.onerror = () => {
- es.removeEventListener('read', updateStatus);
+ if ('EventSource' in window) {
+ const eventParams = { hash: hash };
+ let url = new URL(`https://juick.com/api/events?${qs.stringify(eventParams)}`);
+ let es = new EventSource(url);
+ es.onopen = () => {
+ console.log('online');
+ };
+ es.onerror = () => {
+ es.removeEventListener('read', updateStatus);
+ };
+ es.addEventListener('read', updateStatus);
+ setEs(es);
+ }
};
- setEs(es);
- }, [visitor]);
-
+ return (() => {
+ if (es.removeEventListener) {
+ es.removeEventListener('read', updateStatus);
+ }
+ });
+ }, [visitor.hash]);
let search = (history, pathname, searchString) => {
let location = {};
diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index 9ac2f2e5..0742b7fb 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -14,18 +14,18 @@ import './Chat.css';
export default function Chat(props) {
const [chats, setChats] = useState([]);
- useEffect(() => {
- console.log(props.connection);
- if (props.connection) {
+ useEffect(() => {
+ if (props.connection.addEventListener) {
props.connection.addEventListener('msg', onMessage);
}
loadChat(props.match.params.user);
+ console.log(props.connection);
return () => {
- if (props.connection) {
+ if (props.connection.removeEventListener) {
props.connection.removeEventListener('msg', onMessage);
}
};
- }, [props.connection]);
+ }, [props.connection.readyState]);
let loadChat = (uname) => {
const { hash } = props.visitor;
@@ -41,7 +41,9 @@ export default function Chat(props) {
let onMessage = (json) => {
const msg = JSON.parse(json.data);
if (msg.user.uname === props.match.params.user) {
- setChats([msg, ...chats]);
+ setChats((oldChat) => {
+ return [msg, ...oldChat];
+ });
}
};
@@ -79,5 +81,5 @@ export default function Chat(props) {
Chat.propTypes = {
visitor: UserType.isRequired,
match: ReactRouterPropTypes.match.isRequired,
- connection: PropTypes.shape.isRequired
+ connection: PropTypes.object.isRequired
};
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 87babc1a..912f808f 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState, useRef, useCallback } from 'react';
import PropTypes from 'prop-types';
import ReactRouterPropTypes from 'react-router-prop-types';
@@ -85,18 +85,22 @@ export default function Thread(props) {
const [loading, setLoading] = useState(false);
const [active, setActive] = useState(0);
useEffect(() => {
- if (props.connection) {
- props.connection.addEventListener('msg', onReply);
- }
setActive(0);
loadReplies();
+ }, []);
+ useEffect(() => {
+ if (props.connection.addEventListener && message.mid) {
+ props.connection.addEventListener('msg', onReply);
+ };
+
return () => {
- if (props.connection) {
+ if (props.connection.removeEventListener && message.mid) {
props.connection.removeEventListener('msg', onReply);
}
- };
- }, [props.connection]);
- let loadReplies = () => {
+ }
+ }, [props.connection, message.mid]);
+
+ let loadReplies = useCallback(() => {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
@@ -119,13 +123,15 @@ export default function Thread(props) {
).catch(ex => {
console.log(ex);
});
- };
- let onReply = (json) => {
+ }, []);
+ let onReply = useCallback((json) => {
const msg = JSON.parse(json.data);
if (msg.mid == message.mid) {
- setReplies([...this.state.replies, msg]);
+ setReplies(oldReplies => {
+ return [...oldReplies, msg];
+ });
}
- };
+ }, [message]);
let postComment = (template) => {
const { mid, rid, body, attach } = template;
comment(mid, rid, body, attach).then(res => {
@@ -172,5 +178,5 @@ Thread.propTypes = {
history: ReactRouterPropTypes.history,
match: ReactRouterPropTypes.match,
visitor: UserType.isRequired,
- connection: PropTypes.shape.isRequired
+ connection: PropTypes.object.isRequired
};