Web socket crash course 2022 updated step by step

by Manu
Web socket crash course 2022 updated step by step

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.

You may also like

Leave a Comment