Get connection id from composable

[rahmedd]

Hi, thank you for your work on this library!

I'm making a multiplayer game, with multiple game lobbies. I want to make an HTTP request to an ASP.NET API to ensure that the game lobby name requested is unique, and then use hubcontext within that same ASP.NET controller to add that player to the SignalR group. Because I'm using the SignalR hubcontext in an ASP.NET controller, it has no access to the SignalR event state/context and doesn't know what the connectionId is, so I need to pass the connectionId as part of my HTTP request.

I want to be able to send the SignalR connectionId from the Vue client to the ASP.NET endpoint.
How can I do that? Is there a way to access the connection instance after it's been connected? Somewhere after vue-signlar init() calls connection.start()?

Frontend (initialization) main.ts

...
const connection = new HubConnectionBuilder()
	.withUrl('/api/hub')
	.withAutomaticReconnect()
	.build()

const app = createApp(App)

app.use(VueSignalR, {
	connection,
	autoOffInsideComponentScope: true,
	failFn: () => {
		console.log('signalr conn failed.')
	},
})
...

Frontend usage store.ts

export const useRoom = defineStore('room', () => {
	const signalr = useSignalR()
	const roomState = ref<Room | null>(null)

	signalr.on('Send', message => {
		console.log(`Send: ${JSON.stringify(message)}`)
	})

	signalr.on('JSON-room', message => {
		const res = JSON.parse(message)
		console.log(res)
		roomState.value = res
	})

	async function createGame(roomCode: string, nickname: string) {
		try {
			const res = await axios.post(`${import.meta.env.VITE_API_URL}/Room/CreateGame`, {
				connectionId: 'NOT_IMPLEMENTED',
				groupName: roomCode,
				username: nickname,
			})

			if (!res.data.success) {
				// handle game already exists error
			}
		}
		catch (ex) {
			console.log(ex)
		}
	}
})

Backend:

...
[HttpPost("CreateGame")]
public async Task<Results<Ok<BaseResponseEmpty>, ValidationProblem>> CreateGame(
	string connectionId,
	string groupName,
	string username
)
{
	var room = await _roomService.GetRoom(groupName);
	if (room != null)
	{
		return TypedResults.Ok(new BaseResponseEmpty(false, "Room already exists"));
	}

	await _roomService.CreateRoom(connectionId, groupName, username);
	await _hubContext.Groups.AddToGroupAsync(connectionId, groupName);

	var gameStateJson = await _roomService.GetRoomAsJson(groupName);
	await _hubContext.Clients.Group(groupName).SendAsync("JSON-room", gameStateJson); // push updated game state to all players
	
	return TypedResults.Ok(new BaseResponseEmpty(true, "Game created"));
}
...

[IlCallo]

Hey there, I'm not sure how you could get that, but surely SignalR client, upon which we built this package, have some way of accessing that piece of information

It feels weird that you need to provide it from your client instead just inferring it server side, are you sure there isn't another way?

IIRC latest SignalR iterations started managing the connection id behind the curtains on purpose to avoid users the hassle to it themselves

[rahmedd]

There's no way to access the connectionId in the controller without mapping the signalR connectionId to the UserID in some way before making the HTTP request. This is an free/open game with no accounts so it's much harder to correlate, I wouldn't be able to use Identity framework and it's sessions since I don't think it will assign it a sessionId without logging in.

I was debugging main.ts, It looks like once the connection has been established I can get connection.connectionId, but there's no way for me to expose this or use it reactively in main.ts. Is there a way I can access the signalR instance through the composable?

[IlCallo]

I don't think it will assign it a sessionId without logging in

Have you actually tried it or are you guessing?

Is there a way I can access the signalR instance through the composable?

As explained in this package README, you're the one in charge of creating the connection in the first place, you should keep a reference to it

import { VueSignalR } from "@dreamonkey/vue-signalr";
import { HubConnectionBuilder } from "@microsoft/signalr";
import { createApp } from "vue";
import App from "./App.vue";

// Create your connection
// See https://docs.microsoft.com/en-us/javascript/api/@microsoft/signalr/hubconnectionbuilder
const connection = new HubConnectionBuilder() <====== Keep a reference of this  
  .withUrl("http://localhost:5000/signalr")
  .build();

createApp(App).use(VueSignalR, { connection }).mount("#app");

The composable returns a service which doesn't keep an internal reference to the connection other than the parameter you provide during initialization

We could easily return it from here:

vue-signalr/src/service.ts

Lines 124 to 131 in 6f9e461

	return {
	init,
	connected,
	invoke,
	on,
	off,
	once,
	};

But I'd keep the API lean and avoid that, since you already have a mean to get the connection reference yourself

[gws-jenny-andrews]

I think you have number of issues using this package for your needs. l am in a similar position to you, where I want anonymous users, but need to map to my db of "users" in the room.

I've tried a number of different solutions, but they are all very messy and feel like a hack.

If that is the extent of your CreateGame proc, then the simplest solution is rather than call the API to check if the user exists, invoke a message with the userId and groupName and then call your _roomService in there. You can get the connection id in the Hub proc and to create the room and then add the user to the group.

As you are only sending a true/false response, then you can just throw an error if the user exists, and wrap the invoke in a try/catch. As I said, this is messy because for some reason it throws a general error, regardless of what you throw, so you can't pick up any other errors in the roomService creation.

The other thing I tried, meant not using this package and user a lower level of abstraction. When I add my user, I create a JWT and update the hub instantiation on the backend to accept the JWT. However, because this package starts the process in the main.ts, that is too early to add the token to the builder.

That said, if you can get a handle to the connection as the author said, you may be able to update it later.

It would be better if the initialisation did not do a full instantiation and allows us to do something like const signalR = useSignalR( hubOptions) a little like [this] (https://github.com/Lingwcy/ChatHubWeb/tree/main/ChatHubVue)

// Connect, using the token we got. this.connection = new signalR.HubConnectionBuilder().withUrl("/hubs/chat", { accessTokenFactory: () => this.loginToken }).build();

Sorry this was not much help. I use this package a lot, but with Identity for auth for all users so I can easily keep track, but as I'm trying to have the regular users anon, it is causing me multiple headaches.

[IlCallo]

this package starts the process in the main.ts, that is too early to add the token to the builder.
It would be better if the initialisation did not do a full instantiation

Hey there, the package doesn't mandate when/where to instantiate the SignalR instance
You can wait until this.loginToken is filled before initializing the SignalR instance

Just note that calling useSignalR would end up throwing an error if you call it before initializing the SignalR instance

That said, useSignalR is just a convenience wrapper around inject(SignalRSymbol), you can do that yourself and manage on your own accessing it when it's not initialized/provided

---

@rahmedd were you able to get a connection reference and solve your problem?
Can I close this issue?