Upgrading to nextjs 12 with custom server giving error for websocket and the whole ui is breaking

[rishabhtatia1]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
Platform: linux
Arch: x64
Version: #33~20.04.1-Ubuntu SMP Mon Feb 7 14:25:10 UTC 2022
Binaries:
Node: 14.17.0
npm: 6.14.13
Yarn: 1.22.17
pnpm: N/A
Relevant packages:
next: 12.1.0
react: 17.0.2
react-dom: 17.0.2

What browser are you using? (if relevant)

Google Chrome

How are you deploying your application? (if relevant)

local machine its breaking itself

Describe the Bug

When I try to upgrade from next 11 to 12. It is giving me websocket error and ui is breaking.
This is my custom server anything I have written incorrect

Expected Behavior

It should work similarly

To Reproduce

const SocketServer = require('ws').Server;
const express = require('express');
const ip = require('ip');
const next = require('next');
const dev = process.env.NEXT_PUBLIC_ENV === 'local';
const app = next({ dev });
const path = require('path');
const handle = app.getRequestHandler();
/**

• app (next js ) will prepare our server with express, and then,
• wrap express application inside next

*/

app.prepare().then(() => {
const server = express();
server.use(express.json());
server.all('/_next/webpack-hmr', (req, res) => {
handle(req, res);
});
server.get('/robots.txt', (req, res) => {
if (process.env.NEXT_PUBLIC_ENV === 'prod') {
res.sendFile(path.resolve('public/robots.txt'));
} else {
res.type('text/plain');
res.send('User-agent: \n Disallow: /');
}
});
server.get('', (req, res) => {
return handle(req, res);
});
server.post('*', (req, res) => {
return handle(req, res);
});
let srv = server.listen(process.env.NEXT_PUBLIC_PORT, err => {
if (err) {
throw err;
}
console.warn(Ready on http://localhost:${process.env.NEXT_PUBLIC_PORT});
});
const wss = new SocketServer({ server });
wss.broadcast = function broadcast(data) {
wss.clients.forEach(function each(client) {
client.send(JSON.stringify(data));
});
};
srv.on('upgrade', function (req, socket, head) {
wss.handleUpgrade(req, socket, head, function connected(ws) {
wss.emit('connection', ws, req);
});
});
// kafkaJS Implementationserver
const { Kafka } = require('kafkajs');
const kafka = new Kafka({
clientId: 'my-app',
brokers: [process.env.NEXT_PUBLIC_KAFKA_CLIENT],
connectionTimeout: 3000,
authenticationTimeout: 1000,
reauthenticationThreshold: 10000
});

const consumer = kafka.consumer({ groupId: stock_id_${ip.address()} });
// Need to register different groupId for different applications, can't keep same groupId

const run = async () => {
await consumer.stop();
await consumer.connect();
await consumer.subscribe({
topic: process.env.NEXT_PUBLIC_CHANNEL_TOPIC,
fromBeginning: false
});
await consumer.run({
autoCommit: true,
eachMessage: async ({ message }) => {
wss.broadcast(JSON.parse(message.value));
}
});
};
run().catch(e => console.error([example/consumer] ${e.message}, e));
/**

• Wrapping express app inside next will allow us to create routes by using
• express js function inside of the next js build
• '*' means all routes which are not explicit , use this route for them.
  */
  });

[cyrusae]

I think I'm having the same problem as you are.

[DylanCulfogienis]

@cyrusae 's issue was locked - this is still a problem, both with and without custom servers. Is the Next.js team aware of this? Websockets just not working with Next.js is kinda a big breaking change.