socket.io connection after completion of ajax function

Question

In my application, the client first calls a webservice from the nodejs server to get historical data from a mongoDB database in order to plot it (with the highcharts library). Then i need the get the live updates from the server and send them to the client, in order to do so, i want to use socket.io .

I'm using an AJAX function to call a webservice, and after its completion, i'm trying to create a socket.io connection. But this is not working.

Here is a part of my client side code :

$(function(){

$.ajax({

url: 'http://localhost:3300/historicalData',
type: 'GET',
success : function(data) {
    //some code here
},
complete : function(){
var socket = io('http://localhost:3300');
    //after the connexion is established, i want to do some stuff here
}
});
});

Here is a part of my server side code :

var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get("/historicalData", function(req, res){
  getData(res);
});

io.on('connection', function(socket){
  console.log('A new WebSocket connection has been established');
});

app.listen("3300", function(){
  console.log('Server up: http://localhost:3300');
});

What am I doing wrong here?

And what is the correct way to use socket.io within my application ?

Did you define port inside the client? `var socket = io('http://localhost:3300')` — hurricane, May 03 '18 at 11:03
@hurricane , now i have defined it, but it is not working yet — Hayfa, May 03 '18 at 11:08

scniro · Accepted Answer · 2018-05-04T11:09:26.513

2

you can leverage the connect callback as follows...

complete: () => {
  const socket = io('http://localhost:3300');

  socket.on('connect', socket => {
  // do things
  });
}

Also, you're spinning up your express app when you'll need to listen with your socket server instead. This is easily fixed with the following change

// app.listen('3300');  // ordinary express app
http.listen('3300');    // socket server app

Client API reference

edited May 04 '18 at 11:09

answered May 03 '18 at 11:06

scniro

16,844
8
62
106

i should put this callback on the client side ? – Hayfa May 03 '18 at 11:28
@Hayfa Yea this is on the client side. I have modified my answer above for you. – scniro May 03 '18 at 11:32
i tried what you suggested but it is not working yet ; if this could help, i'm having these error messages in the Web Console : `Loading failed for the – Hayfa May 03 '18 at 13:13
@Hayfa sounds like your server isn't set up correct, have you seen the [express example?](https://socket.io/docs/#using-with-express-3/4) – scniro May 03 '18 at 15:48
indeed, after changing `app.listen("3300")` with `http.listen("3300")` , it is working fine :) – Hayfa May 03 '18 at 16:09
@Hayfa this is great to hear. Can you please accept the answer if you felt it was helpful? – scniro May 03 '18 at 16:26
that's done, but could you please add the part where we should use `http.listen("3300")` instead of `app.listen("3300")` – Hayfa May 04 '18 at 07:28

score 0 · Answer 2 · answered May 04 '18 at 06:46

Create a global connection so that you can use socket anywhere in the code.

For ex.,

var socket = io('http://localhost:3300',{secure:true});
    $.ajax({
        url: 'http://localhost:3300/historicalData',
        type: 'GET',
        success : function(data) {
          console.log(data);
          socket.emit('emit_from_here');
        }
    });
    socket.on('server_response',(res)=>{
     console.log(res); 
    });

Also , in your server side code,

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

var port = 3300;
server.listen(port,(res)=>{
  console.log('Server & Socket listening on port : '+port)
})

var io = socket.listen(server);
io.sockets.on('connection', function(socket){
  socket.on('emit_from_here',()=>{
    socket.emit('server_response','server response');
  })
})

app.get("/historicalData",(req,res)=>{
  res.send('works well');
})

Hope this will help.

When i try your suggestion , i have the following error on the client side : `ReferenceError: io is not defined` — Hayfa, May 04 '18 at 15:20
It was included, but after the client javascript file, i think that's why it was not recognised. Thanks for your help! — Hayfa, May 10 '18 at 08:56

score -1 · Answer 3 · answered May 03 '18 at 14:33

-1

It turned out that i had to use : http.listen("3300") instead of : app.listen("3300")

( i found the solution thanks to this post's answer https://stackoverflow.com/a/24811468/9638215)

answered May 03 '18 at 14:33

Hayfa

147
1
13

Your solution addresses a later bug you found in your code while evaluating my answer, which addresses your original question... It would have been more appropriate to fix your original question with the later discovered defective code and stuck to the path you started... – scniro May 03 '18 at 17:33

socket.io connection after completion of ajax function

3 Answers3