socket.io no communication between server and client

问题

I'm currently trying to have an angular2 frontend communicating with a node.js backend with socket.io. The point is, I get the client connected to the server, but after that, no socket call can be successfully passed between them. Here is a simple piece a code for the server :

var app = require('express')();
var http = require('http');
var server = http.createServer(app);
var io = require('socket.io').listen(server);

io.on('connection', function() {
    io.emit('update');
    console.log('Connected');
});
io.on('updated', function() {
    io.emit('update');
    console.log('Updated');
});

server.listen(5000, function() {
    console.log('Listening on 5000');
});

... and for the component :

import { Component } from '@angular/core';

import * as io from 'socket.io-client';

@Component({
  selector: 'main-app',
  template: `
  <div>
  <button (click)="foo()"
           style='padding:20px; background:red; color:white'>
    click me
  </button>
  </div>
  `
})
export class AppComponent {
  title = 'bar';
  socket = null;

  constructor() {
    let self = this;
      self.socket = io.connect('http://mysuperwebsite:5000', {
          transports : ["websocket"]
      });
      self.socket.on('update', function(data) {
        console.log(data);
      });
  }

  foo() {
    let self = this;
    self.socket.emit('updated', {});
  }
}

I can't get what is wrong, I guess you will ;) Thanks for your help !

EDIT : Finally, the problem seemed to come from the lack of second parameter in io.emit(). Now it works, thanks you very much :)

回答1:

Instead of debugging your code, I'll post you an example that works and you can go from there:

Socket.IO Server

Socket.IO server example using Express.js:

var path = require('path');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', (req, res) => {
  console.error('express connection');
  res.sendFile(path.join(__dirname, 'si.html'));
});
io.on('connection', s => {
  console.error('socket.io connection');
  for (var t = 0; t < 3; t++)
    setTimeout(() => s.emit('message', 'message from server'), 1000*t);
});
http.listen(3002, () => console.error('listening on http://localhost:3002/'));
console.error('socket.io example');

Source: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js

Socket.IO Client

Socket.IO client example using vanilla JavaScript:

var l = document.getElementById('l');
var log = function (m) {
    var i = document.createElement('li');
    i.innerText = new Date().toISOString()+' '+m;
    l.appendChild(i);
}
log('opening socket.io connection');
var s = io();
s.on('connect_error', function (m) { log("error"); });
s.on('connect', function (m) { log("socket.io connection open"); });
s.on('message', function (m) { log(m); });

Source: https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html

That example can be installed from npm or downloaded from GitHub. It's as simple as it gets and it's known to work so you can have a working backend part to test your frontend with.

It was written for this answer - you can find mush more info there.

回答2:

Your server setup seems to be incorrect.

Try this:

io.on('connection', function(socket) {
  socket.emit('update');
  console.log('Connected');
  socket.on('updated', function() {
    socket.emit('update');
    console.log('Updated');
  });
});

来源：https://stackoverflow.com/questions/39619449/socket-io-no-communication-between-server-and-client

标签

node.js

express

angular

Socket.IO