Railway•8mo ago

Socket IO

Hello everyone I am facing an issue connecting my app with a railway server through sockets I'd appreciate if somenone can help me

Solution:

use the same port for http and ws, your app should not be doing https or wss itself, as railway handles the secure part of those transports for you

Jump to solution

22 Replies

Percy•8mo ago

Project ID: N/A

marsicOP•8mo ago

n/a we are using websocket so as I understood I need to use same port for https and wss socket gateway

import {
  WebSocketGateway,
  WebSocketServer,
  OnGatewayConnection,
} from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway({
  cors: {
    origin: '*',
  },
})
export class SocketService implements OnGatewayConnection {
  handleConnection(client: any, ...args: any[]) {
    const token = client.handshake.auth.token;

    client.join(token.toLocaleLowerCase());
  }
  @WebSocketServer()
  server: Server;

  sendMessage(wallet: string, message: any, event: string) {
    this.server.to(wallet.toLocaleLowerCase()).emit(event, message);
  }
}

import {
  WebSocketGateway,
  WebSocketServer,
  OnGatewayConnection,
} from '@nestjs/websockets';
import { Server } from 'socket.io';

@WebSocketGateway({
  cors: {
    origin: '*',
  },
})
export class SocketService implements OnGatewayConnection {
  handleConnection(client: any, ...args: any[]) {
    const token = client.handshake.auth.token;

    client.join(token.toLocaleLowerCase());
  }
  @WebSocketServer()
  server: Server;

  sendMessage(wallet: string, message: any, event: string) {
    this.server.to(wallet.toLocaleLowerCase()).emit(event, message);
  }
}

weboscket provider

'use client'
import React, { FC, useContext, useEffect, useState } from 'react';
import { io } from 'socket.io-client';
import { useAccount } from 'wagmi';

const WebSocketContext = React.createContext<{ socket: any }>({} as any);

const WebSocketProvider: FC<{ children: React.ReactNode }> = ({ children }) => {
  const [socket, setSocket] = useState<any>();

  const { address } = useAccount();

  useEffect(() => {
    if (address && !socket) {
      const createdSocket = io(process.env.NEXT_PUBLIC_WSS_URL as string, {
        auth: {
          token: address.toString(),
        },
      });

      setSocket(createdSocket);
    }

    return () => {
      socket?.close();
    };
  }, [address]); // Empty dependency array to run only once on mount and unmount

  return (
    <WebSocketContext.Provider value={{ socket }}>
      {children}
    </WebSocketContext.Provider>
  );
};

export const useWebSocket = () => {
  return useContext(WebSocketContext);
};

export default WebSocketProvider;

'use client'
import React, { FC, useContext, useEffect, useState } from 'react';
import { io } from 'socket.io-client';
import { useAccount } from 'wagmi';

const WebSocketContext = React.createContext<{ socket: any }>({} as any);

const WebSocketProvider: FC<{ children: React.ReactNode }> = ({ children }) => {
  const [socket, setSocket] = useState<any>();

  const { address } = useAccount();

  useEffect(() => {
    if (address && !socket) {
      const createdSocket = io(process.env.NEXT_PUBLIC_WSS_URL as string, {
        auth: {
          token: address.toString(),
        },
      });

      setSocket(createdSocket);
    }

    return () => {
      socket?.close();
    };
  }, [address]); // Empty dependency array to run only once on mount and unmount

  return (
    <WebSocketContext.Provider value={{ socket }}>
      {children}
    </WebSocketContext.Provider>
  );
};

export const useWebSocket = () => {
  return useContext(WebSocketContext);
};

export default WebSocketProvider;

if I set for NEXT_PUBLIC_WSS_URL variable https - socket doesn't work but If I set wss - socket works but https requests not btw it works perfectly fine locally with different ports but when we deploy the app it doesn't anyone?

Solution

Brody•8mo ago

use the same port for http and ws, your app should not be doing https or wss itself, as railway handles the secure part of those transports for you

marsicOP•8mo ago

so if i understood you correctly

const createdSocket = io("wss://hip-riddle-production.up.railway.app", {
        auth: {
          token: address.toString(),
        },
      });

const createdSocket = io("wss://hip-riddle-production.up.railway.app", {
        auth: {
          token: address.toString(),
        },
      });

this should work right?

Brody•8mo ago

that would be the correct URL your client would need to use, yes. that will work as long as your server code is done properly though I can't comment on if the auth is correct

marsicOP•8mo ago

it works if I use seperate instance for ws

marsicOP•8mo ago

marsicOP•8mo ago

but if I try to use the same instance for both https and wss it doesn't work

Brody•8mo ago

right but that's obviously not optimal as mentioned previously, your websockets and http server need to listen on the same port

marsicOP•8mo ago

okay but what is the solution?

Brody•8mo ago

having your websockets and http server listen on the same port

marsicOP•8mo ago

they are on the same port already

Brody•8mo ago

what port specifically

marsicOP•8mo ago

3000

Brody•8mo ago

it needs to be the PORT environment variable

marsicOP•8mo ago

that's the one

Brody•8mo ago

you shouldn't be setting it yourself, your app should be listening on it by default

marsicOP•8mo ago

bro I don't understand you can you please be more specific the PORT is defined as env variable what should I do? remove it from there or?

Brody•8mo ago

as previously mentioned, you should not be setting the PORT environment variable yourself, your app just simply needs to listen to it as its set automatically for you by railway

marsicOP•8mo ago

got it thanks will try now without port thanks bro it works now :salute:

Brody•8mo ago

no problem

Gaming

Programming

Socket IO