Error ServerMiddleware should expose a handle nuxt - websocket

Question

The new nuxt.js setup does not come with a server folder
You create an API folder and put a file inside which exposes the server
I am trying to use websockets using the ws library to parse user session and getting this error
Here is my code for app.js placed inside api folder
import http from 'http'
import logger from 'express-pino-logger'
import express from 'express'
import cookieParser from 'cookie-parser'
import WebSocket from 'ws'
const app = express()
const sessionParser = cookieParser()
const map = new Map()
app.use(logger())
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(sessionParser)
app.use('/v1', (req, res) => res.json('hello'))
const server = http.createServer(app)
const wss = new WebSocket.Server({ noServer: true })
wss.on('connection', function connection(ws, request, client) {
ws.on('message', function message(msg) {
console.log(`Received message ${msg} from user ${client}`)
})
})
server.on('upgrade', function (request, socket, head) {
console.log('Parsing session from request...')
sessionParser(request, {}, () => {
if (!request.session.userId) {
socket.destroy()
return
}
console.log('Session is parsed!')
wss.handleUpgrade(request, socket, head, function (ws) {
wss.emit('connection', ws, request)
})
})
})
wss.on('connection', function (ws, request) {
const userId = request.session.userId
map.set(userId, ws)
ws.on('message', function (message) {
//
// Here we can now use session parameters.
//
console.log(`Received message ${message} from user ${userId}`)
})
ws.on('close', function () {
map.delete(userId)
})
})
server.listen(3000)
export default server
My nuxt.config.js file
export default {
/*
** Nuxt rendering mode
** See https://nuxtjs.org/api/configuration-mode
*/
mode: 'universal',
/*
** Nuxt target
** See https://nuxtjs.org/api/configuration-target
*/
target: 'server',
/*
** Headers of the page
** See https://nuxtjs.org/api/configuration-head
*/
head: {
title: process.env.npm_package_name || '',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: process.env.npm_package_description || '',
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
/*
** Global CSS
*/
css: [],
/*
** Plugins to load before mounting the App
** https://nuxtjs.org/guide/plugins
*/
plugins: [],
/*
** Auto import components
** See https://nuxtjs.org/api/configuration-components
*/
components: true,
/*
** Nuxt.js dev-modules
*/
buildModules: [
// Doc: https://github.com/nuxt-community/eslint-module
'#nuxtjs/eslint-module',
// Doc: https://github.com/nuxt-community/stylelint-module
'#nuxtjs/stylelint-module',
],
/*
** Nuxt.js modules
*/
modules: [
// Doc: https://axios.nuxtjs.org/usage
'#nuxtjs/axios',
'#nuxtjs/pwa',
],
/*
** Axios module configuration
** See https://axios.nuxtjs.org/options
*/
axios: {},
/*
** Build configuration
** See https://nuxtjs.org/api/configuration-build/
*/
build: {},
serverMiddleware: ['~/api/app'],
}
How do I expose the websocket server from app.js?

Answer 1

Yo should export you server middleware . At the bottom add :
// export the server middleware
module.exports = {
path: '/api',
handler: app
}