Socket.IO - Hello world-alljchome-开发者的教程家园

Socket.IO Tutorial

Socket.IO Useful Resources

Selected Reading

Socket.IO - Hello world

In the following chapter we will discuss the basic example using Socket.IO pbrary along with ExpressJS.

Example

First of all, create a file called app.js and enter the following code to set up an express apppcation −


var app = require( express )();
var http = require( http ).Server(app);

app.get( / , function(req, res){
   res.sendFile( E:/test/index.html );
});

http.psten(3000, function(){
   console.log( pstening on *:3000 );
});

We will need an index.html file to serve, create a new file called index.html and enter the following code in it −


<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <body>Hello world</body>
</html>

To test if this works, go to the terminal and run this app using the following command −


nodemon app.js

This will run the server on localhost:3000. Go to the browser and enter localhost:3000 to check this. If everything goes well a message saying "Hello World" is printed on the page.

Following is another example (this require Socket.IO), it will log "A user connected", every time a user goes to this page and "A user disconnected", every time someone navigates away/closes this page.


var app = require( express )();
var http = require( http ).Server(app);
var io = require( socket.io )(http);

app.get( / , function(req, res){ res.sendFile( E:/test/index.html );
});

//Whenever someone connects this gets executed
io.on( connection , function(socket){
   console.log( A user connected );
   
   //Whenever someone disconnects this piece of code executed
   socket.on( disconnect , function () {
      console.log( A user disconnected );
   });
});
http.psten(3000, function(){
   console.log( pstening on *:3000 );
});

The require( socket.io )(http) creates a new socket.io instance attached to the http server. The io.on event handler handles connection, disconnection, etc., events in it, using the socket object.

We have set up our server to log messages on connections and disconnections. We now have to include the cpent script and initiapze the socket object there, so that cpents can estabpsh connections when required. The script is served by our io server at /socket.io/socket.io.js .

After completing the above procedure, the index.html file will look as follows −


<!DOCTYPE html>
<html>
   <head><title>Hello world</title></head>
   <script src="/socket.io/socket.io.js"></script>
   <script>
      var socket = io();
   </script>
   <body>Hello world</body>
</html>

If you go to localhost:3000 now (make sure your server is running), you will get Hello World printed in your browser. Now check your server console logs, it will show the following message −


A user connected

If you refresh your browser, it will disconnect the socket connection and recreate. You can see the following on your console logs −


A user connected
A user disconnected
A user connected

Socket.IO - Hello world

Example

友情链接