Socket.IO client unable to connect to Microsoft Graph websocket endpoint

Question

I followed the Microsoft Graph documentation at "Get websocket endpoint" (https://learn.microsoft.com/en-us/graph/api/subscriptions-socketio?view=graph-rest-1.0&tabs=javascript).

My get request to this endpoint: /sites/${siteId}/drive/root/subscriptions/socketIo (using the Javascript SDK) successfully provides a subscription object with a notification url.

Using the following, my socket instance does not connect to the MS Graph Socket IO server and instead encounters connection errors.

import { io } from "socket.io-client";


const socket = io(notificationUrl);
socket.on("connect", () => console.log("Connected!"));
socket.on("notification", (data) => console.log("Notification!", data));


socket.on("connect_error", (err) => console.error("Connect error", err))

Can anyone tell me what I am doing wrong?

---

Error logging callbacks attached to the "error" and "connect_error" events print the following two types of errors:

{
      "type": "TransportError",
      "message": "xhr post error",
      "stack": <OMITTED>,
      "description": 400,
      "context": {
        "UNSENT": 0,
        "OPENED": 1,
        "HEADERS_RECEIVED": 2,
        "LOADING": 3,
        "DONE": 4,
        "readyState": 4,
        "responseText": "{\"code\":1,\"message\":\"Session ID unknown\"}",
        "responseXML": "",
        "status": 400,
        "statusText": null
      }
    }

{
	"type": "TransportError",
	"message": "xhr poll error",
	"stack": <OMITTED>,
	"description": 400,
	"context": {
		"UNSENT": 0,
		"OPENED": 1,
		"HEADERS_RECEIVED": 2,
		"LOADING": 3,
		"DONE": 4,
		"readyState": 4,
		"responseText": "{\"code\":1,\"message\":\"Session ID unknown\"}",
		"responseXML": "",
		"status": 400,
		"statusText": null
	}
}