1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-socket.io/pages/_app.js
Bünyamin Benny Genel 6ed2da4575 with-socket.io Example updated with _app.js (#4644)
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.
2018-06-23 22:17:37 +02:00

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