Websockets with NextJS
Hello, im new in cloudflare workers, i'm just trying to achieve the following thing:
in Nextjs send some data to the cloudflare worker through websockets:
---------------------------------------------------------------------------
NEXTJS (CLIENT SIDE):
let websocket = new WebSocket("ws://xxxxxxxx.workers.dev/")
if (!websocket) {
throw new Error("Server didn't accept WebSocket")
}
when the cloudflare worker receives it, it should process some code calling a template html:
---------------------------------------------------------------------------
CLOUDFLARE WORKER (index.js):
import HTML from "example.html";
export default {
async fetch(request, env) {
const upgradeHeader = request.headers.get('Upgrade');
if (!upgradeHeader || upgradeHeader !== 'websocket') {
return new Response('Expected Upgrade: websocket', { status: 426 });
}
return new Response(HTML, {headers: {"Content-Type": "text/html;charset=UTF-8"}});
}
}
---------------------------------------------------------------------------
CLOUDFLARE WORKER (example.html):
<!DOCTYPE html>
<html>
<body>
<script>
// After processing some code it returns a response to the nextjs client....
const webSocketPair = new WebSocketPair();
const client = webSocketPair[0],
server = webSocketPair[1];
server.accept();
server.addEventListener('message', event => {
console.log(event.data);
});
</script>
</body>
</html>
---------------------------------------------------------------------------
This is my code but im getting this error:
Expected Upgrade: websocket (426)
Thats the error in the cloudflare worker if there is not upgradeHeader, why is this happening?, im just trying to set a simple connection between nextJS and cloudflare workers, could you guys help me with an example?, just send a "hello world" from the client (nextjs) and return an "hello" from the server (cloudflare worker) ty
in Nextjs send some data to the cloudflare worker through websockets:
---------------------------------------------------------------------------
NEXTJS (CLIENT SIDE):
let websocket = new WebSocket("ws://xxxxxxxx.workers.dev/")
if (!websocket) {
throw new Error("Server didn't accept WebSocket")
}
when the cloudflare worker receives it, it should process some code calling a template html:
---------------------------------------------------------------------------
CLOUDFLARE WORKER (index.js):
import HTML from "example.html";
export default {
async fetch(request, env) {
const upgradeHeader = request.headers.get('Upgrade');
if (!upgradeHeader || upgradeHeader !== 'websocket') {
return new Response('Expected Upgrade: websocket', { status: 426 });
}
return new Response(HTML, {headers: {"Content-Type": "text/html;charset=UTF-8"}});
}
}
---------------------------------------------------------------------------
CLOUDFLARE WORKER (example.html):
<!DOCTYPE html>
<html>
<body>
<script>
// After processing some code it returns a response to the nextjs client....
const webSocketPair = new WebSocketPair();
const client = webSocketPair[0],
server = webSocketPair[1];
server.accept();
server.addEventListener('message', event => {
console.log(event.data);
});
</script>
</body>
</html>
---------------------------------------------------------------------------
This is my code but im getting this error:
Expected Upgrade: websocket (426)
Thats the error in the cloudflare worker if there is not upgradeHeader, why is this happening?, im just trying to set a simple connection between nextJS and cloudflare workers, could you guys help me with an example?, just send a "hello world" from the client (nextjs) and return an "hello" from the server (cloudflare worker) ty
