Socket.Io – Working Chat and General Stuff

Socket.Io – Working Chat and General Stuff


Socket.io allows for PHP based system to have server pushing data to client without request from client.

Most of that stuff below needs node.js installed on your server.

If you work on Windows just get Windows installer and add node to your Environment Variable path, to make it global.

Similar operation describing registering Composer with EV path is described here.


Socket.Io
Checking version

Same way you can check all stuff installed via np, like: express, ioredis etc.

Installation

Socket.io can be downloaded from here.

It can be installed using node.js npm, like this:

It is good to use ‘–save’ flag to add socket.io to dependencies list in your project package.json file, to keep it up to date with other stuff you are using, or you are about to use.

Usual socket project structure

Socket client

You need a socket.io client, which your project will pull into user’s browser
Something like:

If you do not want to use socket.io CDN (content delivery network) hosted client script, you can download version from here and serve it from your own server, or some other CDN.

Socket server worker

This is usually an index.js file, which is being activated via console command:

This file is a place where you bootstrap and fire all needed elements, like:

  • express framework
  • socket.io and all its channels, connections and broadcasting
  • html/template file (called, when accessing defined port)
  • define a port app is going to be listened on
  • etc.

When bootstrap is neatly tied, you can listen to your app in browser, by listening to defined port like this:

 

Sample Chat

Socket.io home page have chat demo here.

Unfortunately demo does not work.

In downloadable package below, you will find fixed version of that chat.
Of course, full credit goes to creators – I just fixed  few little things.

Edit 2018-03-18: demo works now and they added nice whiteboard.

zip

In archive you will find a drop-in package.
What it means is that all you have to do is:

  1. unzip
  2. drop content of folder /b8 (in archive) to your localhosted location
  3. change ‘b8’ in index.html file to your own localhosted location/domain, e.g. /mychat
  4. you need internet access (dependencies: botstrap, socket client, jquery)
  5. node dependencies: socket.io and express are already in zipped package
  6. open command prompt (windows) or console and go inside of your ‘mychat’ directory (or some other you are using)
  7. type is: node index.js – keep console open
  8. navigate in your browser to: mychat:3000

… and you have working chat open.

Now you can open another window with chat (or two) and see how posted stuff gets passed via sockets between browser windows. Same it would work between people in remote locations.

Here, you can find some nice socket.io cheat-sheet. Thanks Alex.
Just is case, it is also accessible here: socket-cheatsheet

 


Redis

If you wish to store some data, you can use Laravel’s Swiss army knife: Redis (queues, broadcasting, cache, data storage etc.)
More about Redis – here.

 


Redis.Js

There is also Redis API (client) called Redis.Js, that is a great way to work with Redis from within Socket.Io code.
You can find it here.

When installing, it is good to add it as dependency to your package.json like this (note –save):

This will update your package.json.

You need to have Redis installed on your system to use above wrapper (API)!
Other Redis clients

Find the all here.

Also, you may look at ioredis instead of redis.js

 


Express JS Framework

You will need this JS framework to work with sockets.

You can install it like this:

Again, ‘–save’ will add it to package.json as dependency.