How to define webSocketImpl，its type is unknown

[Justin3go]

docs

I want to use graphql-ws client in miniprogram with uniapp，but the miniprogram has custom webscoket api.

such as:

• uni.connectSocket(OBJECT)
• uni.onSocketOpen(CALLBACK)
• uni.onSocketError(CALLBACK)
• uni.sendSocketMessage(OBJECT)
• uni.onSocketMessage(CALLBACK)
• uni.closeSocket(OBJECT)
• uni.onSocketClose(CALLBACK)

so I need to define webSocketImpl with these api

[Justin3go]

I don’t know what api has used in graphql-ws, It confuses me.

[enisdenjo]

A custom WebSocket implementation to use instead of the one provided by the global scope.

webSocketImpl client option

WebSocket implementation in the global scope of JavaScript can only be the web WebSocket API; meaning, your custom thing has to implement its interface.

Maybe this link should be added to the description. 🤔

[Justin3go]

"First of all, thank you for answering my question. I understand now that I previously thought graphql-ws might only use certain APIs, so I wanted to try to adapt it. But it seems impossible now. By the way, if I don't use the graphql-ws client and instead implement my own, would the workload be very large?"

[enisdenjo]

I think that adapting your custom API to match the web WebSocket API is an easier task compared to implementing the transport yourself from scratch.

However, if you decide to go for a custom implementation - you should rely on the GraphQL over WebSocket spec.

[Justin3go]

Hi, I tried to implement this adapter again according to the specifications on MDN. Here is the code:

export class uniWebSocket {
	private socketTask: null | UniApp.SocketTask;
	public readyState: number = 0;
	public onOpen = (e: any) => {};
	public onClose = (e: any) => {};
	public onError = (e: any) => {};
	public onMessage = (e: any) => {};

	constructor(url: string, protocol: string) {
                // Here is the method for establishing a WebSocket connection. The returned object can have events such as error, close, open, and message.
		const socketTask = uni.connectSocket({
			url,
			protocols: [protocol],
			complete: () => {},
		});
		this.socketTask = socketTask;
		if (!this.socketTask) {
			throw new Error("server didn't accept Websocket");
		}
		this.init();
	}
	static CONNECTING = 0;
	static OPEN = 1;
	static CLOSING = 2;
	static CLOSED = 3;

	private init() {
		if (this.socketTask === null) throw new Error("uniWebSocket not init");
		this.socketTask.onOpen((e: any) => {
			console.log("websocket open: ", e);
			this.readyState = 1;
			this.onOpen(e);
		});
		this.socketTask.onError((e: any) => {
			console.log("websocket error: ", e);
			this.readyState = 1;
			this.onError(e);
		});
		this.socketTask.onClose((e: any) => {
			console.log("websocket close: ", e);
			this.readyState = 2;
			this.onClose(e);
			this.readyState = 3;
		});
		this.socketTask.onMessage((e: any) => {
			console.log("websocket message: ", e);
			this.readyState = 1;
			this.onMessage(e);
		});
	}

	public addEventListener(type: "open" | "error" | "close" | "message", callback: (event: any) => void) {
		if (type === "open") {
			this.onOpen = callback;
		} else if (type === "error") {
			this.onError = callback;
		} else if (type === "close") {
			this.onClose = callback;
		} else if (type === "message") {
			this.onMessage = callback;
		}
	}

	public send(msg: string) {
		if (this.socketTask === null) throw new Error("uniWebSocket not init");
		this.socketTask.send({ data: msg });
	}
	public close(code: number, reason: string) {
		if (this.socketTask === null) throw new Error("uniWebSocket not init");
		this.socketTask.close({ code, reason });
	}
}

Firstly, my interface is working properly.

Secondly, this is the graphql-ws code that I use on the client side.

import { uniWebSocket } from "@/utils/websocket";
import { createClient } from "graphql-ws";

const wsClient = createClient({
	url: `${import.meta.env.VITE_SERVER_IP_WS}/graphql`,
	webSocketImpl: uniWebSocket,
});

(async () => {
			const onNext = () => {
				/* handle incoming values */
			};

			let unsubscribe = () => {
				/* complete the subscription */
			};

			await new Promise((resolve, reject) => {
				unsubscribe = wsClient.subscribe(
					{
						query: newMessage,
					},
					{
						next: onNext,
						error: reject,
						complete: resolve as any,
					}
				);
			});
			console.log("subscription: ", onNext);
		})();

Then it throws an error during websocket initialization.

"This is a screenshot of the network request package."

"This is clearly a failed initialization, and I noticed that the client did not send any information in the first request, which may be the reason for the failure."

So, is there any problem with my adapter? If you could take a look and help me, I would be very happy.