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
Welcome to the official Cloudflare Developers server. Here you can ask for help and stay updated with the latest news
85,042Members
Resources
Similar Threads
Was this page helpful?
