由于不支持的协议版本，ngx-socket-io 无法连接到服务器

Question

I'm building a web app with angular frontend and a NodeJs server on backend, both run on different places. I'm trying to use ngx-socket-io on angular to connect to my server but I have an error:

{
"code": 5,
"message": "Unsupported protocol version"}

on the browser console.

This is my code:

app-module.ts (Angular)

 ... import { IoRequestService } from './services/ioRequest.service' import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io'; const config: SocketIoConfig = { url: 'http://localhost:8080', options: {transports: [ "websocket" ], withCredentials: true} }; @NgModule({... imports: [ BrowserModule, SocketIoModule.forRoot(config), AppRoutingModule, FormsModule, GoogleChartsModule ], providers: [ IoRequestService ], bootstrap: [AppComponent] }) export class AppModule { }

Io service

 import { Socket } from 'ngx-socket-io'; import { Injectable } from '@angular/core'; import { map } from 'rxjs/operators'; @Injectable() export class IoRequestService { constructor(private socket: Socket) { } sendMessage(msg: string) { this.socket.emit("message", msg); console.log("msg send"); } getMessage() { return this.socket.fromEvent("message").pipe(map((data:any) => data.msg)); } }

use of io service:

 ... export class TransactionsComponent implements OnInit { transactions: Transaction[] = []; constructor(private serviceIO: IoRequestService) { } ngOnInit(): void { } send() { console.log("button clicked"); this.serviceIO.sendMessage("test"); } }

And nodeJS backend:

 var http = require('http'); var express = require('express'); var mysql = require('mysql'); var app = express(); var server = http.createServer(app); const io = require('socket.io')(server, { cors: { origin: "http://localhost:4200", methods: ["GET", "POST"], credentials: true, allowEIO3: true } }); var connection = mysql.createConnection({ host: 'localhost', user: 'student', password: 'std___01', database: 'elevage' }); app.engine('html', require('ejs').renderFile); app.set('view engine', 'html'); app.set('views', __dirname); app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); }); io.on('connection', (socket) => { console.log('a user connected'); socket.on('disconnect', () => { console.log('user disconnected'); }); socket.on('message', (socket)=> { console.log('I win the game'); }) }); //handle unfound pages app.use(function(req, res, next){ res.setHeader('Content-Type', 'text/plain'); res.status(404).send('Page introuvable;'); }). server,listen(8080. (err) => { if (err) { return console,log('something bad happened'; err). } console;log(`server is on`); });

Any Idea what the problem is? I saw that people also use socket.io-client but ngx-socket-io seems way easier, maybe that's the issue but everything seems ok when I look at the docs.

There ( https://socket.io/docs/v3/migrating-from-2-x-to-3-0/index.html ) I found that issue may be solved by setting allowEIO3: true , but it didn't worked. Or maybe it comes from the browser? I tried on both firefox and safari latest version and I have the same issue.

When I install the npm package, I had to force it. It may encounter issue because of the repesitories structures? which look like that:

• project
• angular-app
  • node_module (for Angular)
• nodejs-app
• node_module (for NodeJs)

Answer 1

Are you requiered to use ngx-socket-io? I had the same issue and replaced it by socket.io-client version 3.1.2 It seems to work fine for me with this package.