Web socket crash course 2022 updated step by step

    By: Manu
    1 year ago


    In this guide we are going to see web socket in action. So we use web sockets for chat systems and for notification systems where you want to show content without refreshing page.

    Or you might use web sockets with web hooks.


    Technologies used

    Node, Composer, Javascript, PHP. So without waiting any further let's get started.

    we need to create 2 files. First js file and second php file here .

    Create a project folder and run command

    // To initiate npm
    
    npm init -y 
    

    This will create a default settings in package.json file. then you need to install few packages so here are the commands

    // Installing socket.io
    
    npm install --save socket.io
    
    // Installing Express
    
    npm install --save express
    
    
    // For php we need to install elephant.io
    
    composer require wisembly/elephant.io
    


    Before running these commands make sure you have node and composer installed in your system. After installing these packages create


    First server.js file


    let socket = require('socket.io')(3001),
        express = require('express'),
        https = require('https'),
        http = require('http');
    
    
    
    let app = express();
    let http_server = http.createServer(app);
    
    
    let io = socket.listen(http_server);
    io.sockets.on('connection', function(socket){
        socket.on("new_event", function(data){
            console.log(data);
        });
    });
    


    Here basically we are calling packages and then creating an app using express. then using app we created a server.

    Afterwards we are listening to that server on port 3001.

    what ever data we get from php file we are going to console log it.


    Here is php file code

    <?php
    error_reporting(E_ALL);        // displaying error
    ini_set('display_errors', 1);  // displaying error
    
    
    include("vendor/autoload.php");    // including composer packages files
    
    
    use ElephantIO\Client;
    use ElephantIO\Engine\SocketIO\Version2X as Version2X;;
    
    
    
    $version = new Version2X("http://localhost:3001");     // Binding to port 3001
    $client = new Client($version);
    
    
    $client->initialize();
    $client->emit("new_event", [
        "test" => "test",
        "test1" => "test1"
    ]);
    $client->close();
    

    Here we return data as "new_event".



    Ok testing time

    open terminal and go to project folder where we have js and php file.

    so if file name is server.js then run this file using below given command.

    node server
    

    then open php file in browser and refresh page you should see some content printed on terminal . Here have a look

    See same data we are returning in php file.

    Important Commands

    // Kill-stop all running node servers.
    
    killall node
    
    // Run node server.
    
    node filename for example 
    node server.js or node server  // as our file is server.js
    
    // Run nodejs in background
    
    node filename > /dev/null 2>&1 &   
    
    node server > /dev/null 2>&1 &   
    

    Hope this helps.