0 to Infinity Lesson

Host a WebSocket server with Cloudflare.

This lesson turns our full setup conversation into a structured guide: Cloudflare registration, DNS migration from GoDaddy, Blogger-safe DNS records, Cloudflare Worker hosting, custom domain mapping, HTTPS, WSS, and final testing for server.learnwithchampak.live.

Cloudflare PagesCloudflare WorkersGoDaddy DNSWebSocketWSSCustom Domain
Cloudflare WebSocket lesson cover image
Advertisement

0. The big idea

Cloudflare has two different hosting roles. Mixing them up creates confusion.

Cloudflare Pages

Use it for static frontend files: HTML, CSS, JS, images, SEO pages, lesson pages, and tools that run in the browser.

Cloudflare Workers

Use it for backend/serverless code: API endpoints, WebSocket handling, redirects, lightweight logic, and request processing.

Custom Domain

Use this to make a Worker available at your own hostname, for example server.learnwithchampak.live.

Final target:
Website URL:  https://server.learnwithchampak.live/
WebSocket:    wss://server.learnwithchampak.live/

1. Cloudflare registration and dashboard

Start by making a Cloudflare account and adding the main domain.

  1. Create or sign in to Cloudflare. Use your email account, verify it, and open the Cloudflare dashboard.
  2. Add the domain. Choose Connect a domain, not transfer and not buy.
  3. Enter the root domain only. Enter learnwithchampak.live, not server.learnwithchampak.live.
  4. Choose the Free plan. Free is enough for DNS, Workers testing, and basic static/server experiments.
Why not add the subdomain first? Cloudflare must manage the parent zone learnwithchampak.live before it can create a Worker custom domain like server.learnwithchampak.live.

2. DNS migration from GoDaddy to Cloudflare

DNS tells the internet where each domain or subdomain should go.

Records preserved for the main Blogger site

Type Name Content Proxy Meaning
A @ 216.239.32.21 DNS only Google/Blogger root domain
A @ 216.239.34.21 DNS only Google/Blogger root domain
A @ 216.239.36.21 DNS only Google/Blogger root domain
A @ 216.239.38.21 DNS only Google/Blogger root domain
CNAME www ghs.google.com DNS only Blogger www mapping

The old server record was removed

The imported DNS had an old server record:

A    server    148.72.90.30

That record had to be removed because server.learnwithchampak.live must point to the Cloudflare Worker, not to the old IP.

GoDaddy nameservers were replaced

The GoDaddy nameservers:

ns63.domaincontrol.com
ns64.domaincontrol.com

were replaced with the Cloudflare nameservers:

daniella.ns.cloudflare.com
venkat.ns.cloudflare.com
Important rule: Replace nameservers. Do not add Cloudflare nameservers beside GoDaddy nameservers.

3. Create the Cloudflare Worker WebSocket server

The Worker is the backend. It can accept a WebSocket upgrade request.

  1. Open Workers & Pages.
  2. Create or open the Worker named server.
  3. Open Edit code.
  4. Paste the WebSocket echo Worker code.
  5. Deploy the Worker.

Basic Worker WebSocket echo code

export default {
  async fetch(request) {
    const upgradeHeader = request.headers.get("Upgrade");

    if (upgradeHeader !== "websocket") {
      return new Response("Use WebSocket: wss://", { status: 426 });
    }

    const pair = new WebSocketPair();
    const client = pair[0];
    const server = pair[1];

    server.accept();

    server.addEventListener("message", event => {
      server.send("Echo from Cloudflare Worker: " + event.data);
    });

    return new Response(null, { status: 101, webSocket: client });
  }
};
For bigger apps: this simple Worker is good for echo tests. For chat rooms, shared whiteboards, multiplayer, or many users sharing one state, use Workers plus Durable Objects later.

4. Add server.learnwithchampak.live as Worker custom domain

After the main domain is active in Cloudflare, attach the subdomain to the Worker.

  1. Open Workers & Pages.
  2. Click the Worker named server.
  3. Go to Settings.
  4. Open Domains & Routes.
  5. Click Add.
  6. Choose Custom Domain.
  7. Enter server.learnwithchampak.live.
  8. Save and wait for Cloudflare to prepare routing and SSL.

What changes?

Before:
https://server.champaksworld.workers.dev/

After:
https://server.learnwithchampak.live/
wss://server.learnwithchampak.live/

5. HTTPS and WSS testing

HTTPS is for web pages. WSS is secure WebSocket. Both should work on the custom domain.

Browser URL

Always open the secure URL:

https://server.learnwithchampak.live/

If the browser shows Not secure, check whether you opened http:// instead of https://.

WebSocket URL

Use this inside JavaScript:

wss://server.learnwithchampak.live/

Do not use ws:// from an HTTPS page.

Console test

const ws = new WebSocket("wss://server.learnwithchampak.live/");

ws.onopen = () => {
  console.log("Connected");
  ws.send("Champak");
};

ws.onmessage = event => {
  console.log("Received:", event.data);
};

ws.onerror = error => {
  console.log("Error:", error);
};

Expected result

Connected
Received: Echo from Cloudflare Worker: Champak

6. Where the static homepage fits

You also generated a homepage for server.learnwithchampak.live.

The static homepage can be served by a Worker response, by Cloudflare Pages, or by another static host. The backend WebSocket behavior comes from the Worker.

server.learnwithchampak.live/
  → Worker handles requests
  → normal HTTPS request returns homepage HTML
  → WebSocket upgrade request becomes WSS backend
Best clean architecture: one custom domain can show a page for normal browser requests and accept WebSocket upgrades for WSS requests.

7. All pictures from the setup

These screenshots document the real flow followed in this setup.

8. Troubleshooting map

Common problems and direct fixes.

Problem Likely cause Fix
Cloudflare says domain not active Nameservers not changed yet or propagation not complete Replace GoDaddy nameservers with Cloudflare nameservers and wait
server.learnwithchampak.live goes to old IP Old A server record still exists Delete old server A record and add Worker custom domain
Main Blogger site stops working Google/Blogger DNS records missing Keep four Google A records and www → ghs.google.com
Browser shows Not secure Opened HTTP, certificate still pending, or SSL setting issue Open HTTPS, wait, and check SSL/TLS mode
WebSocket fails Using ws:// or wrong Worker URL Use wss://server.learnwithchampak.live/

9. Revision questions

Use these for student practice or video narration.

Q1. Can Cloudflare Pages host a WebSocket server?

No. Pages hosts static frontend files. Use Cloudflare Workers for the WebSocket backend.

Q2. What is the secure WebSocket scheme?

wss://

Q3. Should GoDaddy nameservers remain after switching to Cloudflare?

No. Replace them with the two Cloudflare nameservers only.

Q4. Why did we remove the old server A record?

Because server.learnwithchampak.live needed to route to the Cloudflare Worker, not to the old IP address.

Q5. What final URLs should work?

https://server.learnwithchampak.live/ and wss://server.learnwithchampak.live/.

Advertisement