luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

cleanup OctoListener

Browse source
This commit is contained in:
Chen-I Lim 2020-10-21 09:32:36 -07:00
parent d179c9f704
commit 3ee92e570b
3 changed files with 24 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
webapp/src/components/cardDetail.tsx
View file

@ -32,8 +32,7 @@ type State = {
export default class CardDetail extends React.Component<Props, State> { export default class CardDetail extends React.Component<Props, State> {
private titleRef = React.createRef<Editable>() private titleRef = React.createRef<Editable>()
private keydownHandler: any private cardListener?: OctoListener
private cardListener: OctoListener
constructor(props: Props) { constructor(props: Props) {
super(props) super(props)
@ -58,6 +57,11 @@ export default class CardDetail extends React.Component<Props, State> {
}) })
} }
componentWillUnmount() {
this.cardListener?.close()
this.cardListener = undefined
}
render() { render() {
const {boardTree} = this.props const {boardTree} = this.props
const {cardTree} = this.state const {cardTree} = this.state

22
webapp/src/octoListener.ts
View file

@ -11,13 +11,13 @@ class OctoListener {
} }
readonly serverUrl: string readonly serverUrl: string
private ws: WebSocket private ws?: WebSocket
notificationDelay = 200 notificationDelay = 200
constructor(serverUrl?: string) { constructor(serverUrl?: string) {
this.serverUrl = serverUrl || window.location.origin this.serverUrl = serverUrl || window.location.origin
console.log(`OctoListener serverUrl: ${this.serverUrl}`) Utils.log(`OctoListener serverUrl: ${this.serverUrl}`)
} }
open(blockId: string, onChange: (blockId: string) => void) { open(blockId: string, onChange: (blockId: string) => void) {
@ -29,22 +29,22 @@ class OctoListener {
const url = new URL(this.serverUrl) const url = new URL(this.serverUrl)
const wsServerUrl = `ws://${url.host}${url.pathname}ws/onchange?id=${encodeURIComponent(blockId)}` const wsServerUrl = `ws://${url.host}${url.pathname}ws/onchange?id=${encodeURIComponent(blockId)}`
console.log(`OctoListener initWebSocket wsServerUrl: ${wsServerUrl}`) Utils.log(`OctoListener open: ${wsServerUrl}`)
const ws = new WebSocket(wsServerUrl) const ws = new WebSocket(wsServerUrl)
this.ws = ws this.ws = ws
ws.onopen = () => { ws.onopen = () => {
Utils.log('OctoListener webSocket opened.') Utils.log(`OctoListener webSocket opened. blockId: ${blockId}`)
ws.send('{}') ws.send('{}')
} }
ws.onerror = (e) => { ws.onerror = (e) => {
Utils.logError(`OctoListener websocket onerror. data: ${e}`) Utils.logError(`OctoListener websocket onerror. blockId: ${blockId}, data: ${e}`)
} }
ws.onclose = (e) => { ws.onclose = (e) => {
Utils.log(`OctoListener websocket onclose, code: ${e.code}, reason: ${e.reason}`) Utils.log(`OctoListener websocket onclose, blockId: ${blockId}, code: ${e.code}, reason: ${e.reason}`)
if (this.isOpen) { if (ws === this.ws) {
// Unexpected close, re-open // Unexpected close, re-open
Utils.logError('Unexpected close, re-opening...') Utils.logError('Unexpected close, re-opening...')
this.open(blockId, onChange) this.open(blockId, onChange)
@ -52,7 +52,7 @@ class OctoListener {
} }
ws.onmessage = (e) => { ws.onmessage = (e) => {
Utils.log(`OctoListener websocket onmessage. data: ${e.data}`) Utils.log(`OctoListener websocket onmessage. blockId: ${blockId}, data: ${e.data}`)
try { try {
const message = JSON.parse(e.data) const message = JSON.parse(e.data)
switch (message.action) { switch (message.action) {
@ -79,8 +79,12 @@ class OctoListener {
return return
} }
this.ws.close() Utils.log(`OctoListener close: ${this.ws.url}`)
// Use this sequence so the onclose method doesn't try to re-open
const ws = this.ws
this.ws = undefined this.ws = undefined
ws.close()
} }
} }

7
webapp/src/pages/boardPage.tsx
View file

@ -31,7 +31,6 @@ export default class BoardPage extends React.Component<Props, State> {
updatePropertyLabelTimeout: number updatePropertyLabelTimeout: number
private boardListener = new OctoListener() private boardListener = new OctoListener()
private cardListener = new OctoListener()
constructor(props: Props) { constructor(props: Props) {
super(props) super(props)
@ -100,6 +99,8 @@ export default class BoardPage extends React.Component<Props, State> {
} }
componentWillUnmount() { componentWillUnmount() {
Utils.log(`boardPage.componentWillUnmount: ${this.state.boardId}`)
this.boardListener.close()
document.removeEventListener('keydown', this.undoRedoHandler) document.removeEventListener('keydown', this.undoRedoHandler)
} }
@ -160,9 +161,11 @@ export default class BoardPage extends React.Component<Props, State> {
private async attachToBoard(boardId: string, viewId?: string) { private async attachToBoard(boardId: string, viewId?: string) {
Utils.log(`attachToBoard: ${boardId}`) Utils.log(`attachToBoard: ${boardId}`)
// this.boardListener.close()
// this.boardListener = new OctoListener()
this.boardListener.open(boardId, (blockId: string) => { this.boardListener.open(boardId, (blockId: string) => {
Utils.log(`boardListener.onChanged: ${blockId}`) Utils.log(`boardListener.onChanged: ${blockId}`)
this.sync(boardId) this.sync()
}) })
this.sync(boardId, viewId) this.sync(boardId, viewId)