diff --git a/examples/with-sockets/io/index.js b/examples/with-sockets/io/index.js
index 753039a53080..687f16b6518e 100644
--- a/examples/with-sockets/io/index.js
+++ b/examples/with-sockets/io/index.js
@@ -2,23 +2,25 @@ import http from 'http'
 import socketIO from 'socket.io'
 
 export default function () {
-  const server = http.createServer(this.nuxt.renderer.app)
-  const io = socketIO(server)
+  this.nuxt.hook('render:before', (renderer) => {
+    const server = http.createServer(this.nuxt.renderer.app)
+    const io = socketIO(server)
 
-  // overwrite nuxt.server.listen()
-  this.nuxt.server.listen = (port, host) => new Promise(resolve => server.listen(port || 3000, host || 'localhost', resolve))
-  // close this server on 'close' event
-  this.nuxt.hook('close', () => new Promise(server.close))
+    // overwrite nuxt.server.listen()
+    this.nuxt.server.listen = (port, host) => new Promise(resolve => server.listen(port || 3000, host || 'localhost', resolve))
+    // close this server on 'close' event
+    this.nuxt.hook('close', () => new Promise(server.close))
 
-  // Add socket.io events
-  const messages = []
-  io.on('connection', (socket) => {
-    socket.on('last-messages', function (fn) {
-      fn(messages.slice(-50))
+    // Add socket.io events
+    const messages = []
+    io.on('connection', (socket) => {
+      socket.on('last-messages', function (fn) {
+        fn(messages.slice(-50))
+      })
+      socket.on('send-message', function (message) {
+        messages.push(message)
+        socket.broadcast.emit('new-message', message)
+      })
     })
-    socket.on('send-message', function (message) {
-      messages.push(message)
-      socket.broadcast.emit('new-message', message)
-    })
-  })
+  }
 }