How to integrate socket in loopback 4 server API

[imranalisolanki]

i want implement socket in my loopback4 server API. i have integrate socket in my API but it;s routing is not working.

app.io = require('socket.io')(await app.start());
  app.io.on('connection', async function (socket: any) {

    console.log('connected', socket.id)
    socket.on('disconnect', function () {
      console.log('user disconnected');
    });
  });

it's my code but socket is not connected. i have seen this example.

https://github.com/raymondfeng/loopback4-example-websocket/
but it's work only socket server not working with API server. please suggest me how i can implement.

[hacksparrow]

Hi @imranalisolanki can you share a minimal version of your app reproducing the issue, so I can troubleshoot? Sharing a code snippet is not enough, since other factors responsible for the failure may be left out of the context.

[imranalisolanki]

@hacksparrow i have create a simple loopback4 server with some routing and i have gone through https://github.com/raymondfeng/loopback4-example-websocket/ this example and when i have configure it in my server then existing routing is not working.
Application.ts
import { BootMixin } from '@loopback/boot';
import { ApplicationConfig, BindingKey } from '@loopback/core';
import { RestExplorerBindings, RestExplorerComponent, } from '@loopback/rest-explorer';
import { RepositoryMixin } from '@loopback/repository';
import { RestApplication } from '@loopback/rest';
import { ServiceMixin } from '@loopback/service-proxy';
import * as path from 'path';
import { AuthenticationSequence } from './sequence';
import { AuthenticationComponent, registerAuthenticationStrategy } from '@loopback/authentication';

import { TokenServiceBindings, UserServiceBindings, TokenServiceConstants, PasswordHasherBindings, EmailServiceBindings, FCMServiceBindings, ControllerServiceBindings } from './keys';
import { JWTService } from './services/jwt-service';
import { MemberService } from './services/user-service';
import { BcryptHasher } from './services/hash.password.bcryptjs';
import { JWTAuthenticationStrategy } from './authentication-strategies/jwt-strategy';
import { EmailService, FCMService, ControllerService } from './services';
import { ReviewController } from './controllers';
import { SECURITY_SCHEME_SPEC } from './utils/security-spec';

export interface PackageInfo {
name: string;
version: string;
description: string;
}
export const PackageKey = BindingKey.create('application.package');

const pkg: PackageInfo = require('../package.json');

export class BreezeApiApplication extends BootMixin(ServiceMixin(RepositoryMixin(RestApplication))) {
constructor(options: ApplicationConfig = {}) {
super(options);

this.api({
  openapi: '3.0.0',
  info: { title: pkg.name, version: pkg.version },
  paths: {},
  components: { securitySchemes: SECURITY_SCHEME_SPEC },
  servers: [{ url: '/' }],
})

this.setUpBindings();

// Bind authentication component related elements
this.component(AuthenticationComponent);

registerAuthenticationStrategy(this, JWTAuthenticationStrategy);

// Set up the custom sequence
this.sequence(AuthenticationSequence);

// Set up default home page
this.static('/', path.join(__dirname, '../public'));

// Customize @loopback/rest-explorer configuration here
this.bind(RestExplorerBindings.CONFIG).to({ path: '/explorer', });
this.component(RestExplorerComponent);

this.projectRoot = __dirname;
// Customize @loopback/boot Booter Conventions here
this.bootOptions = {
  controllers: {
    // Customize ControllerBooter Conventions here
    dirs: ['controllers'],
    extensions: ['.controller.js'],
    nested: true,
  },
};

}

setUpBindings(): void {
this.bind(TokenServiceBindings.TOKEN_SECRET).to(TokenServiceConstants.TOKEN_SECRET_VALUE);
this.bind(TokenServiceBindings.TOKEN_EXPIRES_IN).to(TokenServiceConstants.TOKEN_EXPIRES_IN_VALUE);
this.bind(TokenServiceBindings.TOKEN_SERVICE).toClass(JWTService);

this.bind(PasswordHasherBindings.ROUNDS).to(10);
this.bind(PasswordHasherBindings.PASSWORD_HASHER).toClass(BcryptHasher);

this.bind(UserServiceBindings.USER_SERVICE).toClass(MemberService);
this.bind(EmailServiceBindings.MAIL_SERVICE).toClass(EmailService)
this.bind(FCMServiceBindings.FCM_SERVICE).toClass(FCMService);
this.bind(ControllerServiceBindings.CONTROLLER_SERVICE).toClass(ControllerService);

}
}

index.ts

import { BreezeApiApplication } from './application';
import { ApplicationConfig } from '@loopback/core';

export { BreezeApiApplication };

export async function main(options: ApplicationConfig = {}) {
const app = new BreezeApiApplication(options);
await app.boot();
//await app.start();

app.io = require('socket.io')(await app.start());
app.io.on('connection', async function (socket: any) {

console.log('connected', socket.id)
socket.on('disconnect', function () {
  console.log('user disconnected');
});

});

const url = app.restServer.url;
console.log(Server is running at ${url});

return app;
}

[hacksparrow]

@imranalisolanki the code you pasted refers to many files not found in the original https://github.com/raymondfeng/loopback4-example-websocket/. Also it has basic run-time errors like console.log(Server is running at ${url});.

I will be able to help you if you can provide a minimal app reproducing the error. Code snippets are not enough.

[kchraniuk]

I have the same problem as @imranalisolanki. I would also like to know how to use/implement the websocket from this example https://github.com/raymondfeng/loopback4-example-websocket/ in this example https://github.com/strongloop/loopback4-example-shopping .

[xdien]

I have been following this topic for a long time. Everyone who has done it successfully with https://github.com/strongloop/loopback4-example-shopping.
Particularly https://github.com/raymondfeng/loopback4-example-websocket/ using httpserver with "Express" I do not know how to implement with RestExplorerComponent

[alexkander]

Hi guys, I had the same problem: Looback 4 RestApplication + socket.io. I solved it based on loopback4-example-todo-list and loopback4-example-websocket. Here is the partial codes:

• Instancing HttpServer with this.restServer.requestHandler: src/application.ts
• Calling app.startWebSocket() in main function and add websocket options: src/index.ts

I am starting with LB4, and I don't know what are the future repercussions of this implementation or if it is a bad practice, but, at the moment, it works for me and maybe for you too.

-------------------------- Updated ---------------------

To inject dependencies of the main app into websocket controllers you must inherit the websocket context of the main context

• Updating WebSocketServer constructor to receive the parent context: src/websocket.server.ts (lines 23 and 27).
• Passing main context to WebSocketServer instancing: src/application.ts (line 40)

[xdien]

thanks @arondn2 . I will try to integrate it into my program

[imranalisolanki]

Hi @arondn2 . when i integrate in my program i am getting error.
Error: The key 'authentication.actions.authenticate' is not bound to any value in context application

[alexkander]

hi @imranalisolanki. I had a similar problem after my first comment in this feed. It is because websocket has not the same context of app. If you have a regular loopbak 4 app like loopback4-example-todo-list you must inherit the websocket context of the main context. I did with this changes.

• Updating WebSocketServer constructor to receive the parent context: src/websocket.server.ts (lines 23 and 27).
• Passing main context to WebSocketServer instancing: src/application.ts (line 40)

-------------------------- Updated ---------------------

The links were wrong. I have updated them.

[d-bo]

@arondn2 httpserver and websocketserver must have different ports ? I get Cannot start the application. { Error: listen EADDRINUSE: address already in use :::5000

index.ts used from src/index.ts