mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
6ed2da4575
with-socket.io example was using a single index file and was managing connection in there. This would lead handling connection (disconnecting and reconnecting) in each added page. I updated example with addition of `_app.js` and handled connection in there. This helped only subscribing to event in page and maintaining connection throughout example.
40 lines
795 B
JavaScript
40 lines
795 B
JavaScript
import App, {Container} from 'next/app'
|
|
import React from 'react'
|
|
import io from 'socket.io-client'
|
|
|
|
class MyApp extends App {
|
|
static async getInitialProps ({ Component, ctx }) {
|
|
let pageProps = {}
|
|
|
|
if (Component.getInitialProps) {
|
|
pageProps = await Component.getInitialProps(ctx)
|
|
}
|
|
|
|
return { pageProps }
|
|
}
|
|
state = {
|
|
socket: null
|
|
}
|
|
componentDidMount () {
|
|
// connect to WS server and listen event
|
|
const socket = io()
|
|
this.setState({ socket })
|
|
}
|
|
|
|
// close socket connection
|
|
componentWillUnmount () {
|
|
this.state.socket.close()
|
|
}
|
|
|
|
render () {
|
|
const {Component, pageProps} = this.props
|
|
return (
|
|
<Container>
|
|
<Component {...pageProps} socket={this.state.socket} />
|
|
</Container>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default MyApp
|