PHP Classes

PHP Chat Application: Chat between Web users using Websockets

Recommend this page to a friend!

  Author Author  
Picture of chrys ugwu
Name: chrys ugwu <contact>
Classes: 15 packages by
Country: Nigeria Nigeria
Age: 29
All time rank: 17808 in Nigeria Nigeria
Week rank: 24 Up2 in Nigeria Nigeria Up
Innovation award
Innovation award
Nominee: 4x


  Detailed description   Download Download .zip .tar.gz   Install with Composer Install with Composer  
This package provides an application to chat between Web users using Websockets.

It starts a Websockets sockets listener using a PHP using the Ratchet library using a listener class that allows users who access the same Web page to chat with each other.

The package also provides an HTML page with JavaScript code that can send HTTP requests to the chat server via Websocket to allow the users to perform the chat actions they want, like joining a chat talk and sending messages to other chat users.

Details

Imap Chat _(PRATICAL)_

A websocket chat with php Rachet

Purpose

A chat system for your website clients. This will send a chat invitation to your email after the client initializes the chat.

Usage

- Start socket sever

php socket.php

- Open index.html with two(or more) browser or tabs.

Documentation

HTML code sample (This will be reference the the documentation below)

<div id="wrapper">

    <div id="user-container">
        <input type="text" id="name" name="name" placeholder="Name" required>
        <input type="email" id="email" name="email" placeholder="Email" required>
        <button type="button" id="join-chat">Join Chat</button>
    </div>

    <div id="chat-container" class="hidden">
        <button type="button" id="leave-room">Leave Chat</button>
        <div id="messages"></div>
        <div id="msg-container" class="chat-msg-action">
            <textarea id="msg" name="msg"></textarea>
            <button type="button" id="send-msg">Send</button>
        </div>
    </div>

</div>

Methods

                                                                             

| Name | Return | Description | |-----------------------|-----------|-------------------------------------------| | constructor | ImapChat | Initial client data (ex: name, email, id).| | setInstanceData | ImapChat | Sets instanceData option. | | setMessageContainerId | ImapChat | Sets messageContainerId option. | | setSendButtonId | ImapChat | Sets sendButtonId option. | | setInputID | ImapChat | Sets inputID option. | | setOnLocalJoin | ImapChat | Sets onLocalJoin option. | | setOnClientJoin | ImapChat | Sets onClientJoin option. | | setSendTPL | ImapChat | Sets sendTPL option. | | setReceiveTPL | ImapChat | Sets receiveTPL option. | | setMutateBeforeSend | ImapChat | Sets mutateBeforeSend option. | | setMutateOnReceive | ImapChat | Sets mutateOnReceive option. | | run | void | Initializes websocket chat |

constructor([object] options, [string] websocketHost) Creates Imap chat instance.

   

_Options_

| Name | Type | Description | |---------------|----------|------------------------------| | options | object | Initial chat setup. | | websocketHost | string | Websocket host (default: ws://localhost:8080?).|

_Options Parameters_

| Name | Type | Required | |--------------------|----------|-----------| | instanceData | object | true | | messageContainerId | string | true | | sendButtonId | string | true | | inputID | string | true | | onLocalJoin | function | false | | onClientJoin | function | false | | sendTPL | function | true | | receiveTPL | function | true | | mutateBeforeSend | function | false | | mutateOnReceive | function | false | | initIdentifier | string | false (This should not be modified unless a property called INITIAL_SOCK_INSTANCE exists in your instanceData |


_Usage_

const imap = new ImapChat({
    instanceData: {name: 'foo', email: 'foo@bar,com'},
    messageContainerId: '#messages',
    inputID: '#msg',
    sendButtonId: '#send-msg',
    onLocalJoin: onLocalJoin,
    onClientJoin: onClientJoin,
    sendTPL: sent,
    receiveTPL: received,
    mutateBeforeSend: mutateAddImageAndTime,
    mutateOnReceive: mutateAddImageAndTime
});

setInstanceData([object] payload) Sets ImapChat.instanceData option.

   

_Options_

| Name | Type | Description | |--------------------|----------|-----------------------------------------------------------------------------------------------------------------------| | payload | object | These are data you want to share between clients. msg property is added to the object before sending it to the server(So msg is reserved) |

_Usage_

const imap = new ImapChat();
imap.setInstanceData({name: 'foo', email: 'foo@bar,com'});

setMessageContainerId([string] id) Sets ImapChat.messageContainerId option.

   

_Options_

| Name | Type | Description | |--------------------|----------|---------------------------------------------------------------| | id | string | Sets the id of the HTML element where chat message will be rendered |

_Usage_

const imap = new ImapChat();
imap.setMessageContainerId('#messages'); // #messages using the HTML snippet provided above.

setSendButtonId([string] id) Sets ImapChat.sendButtonId option.

   

_Options_

| Name | Type | Description | |--------------------|----------|---------------------------------------------------------------| | id | string | Sets the id of the button that submits inputID value on click. |

_Usage_

const imap = new ImapChat();
imap.setSendButtonId('#send-msg'); // #send-msg using the HTML snippet provided above.

setInputID([string] id) Sets ImapChat.inputID option.

   

_Options_

| Name | Type | Description | |--------------------|----------|---------------------------------------------------------------| | id | string | Sets the id of the input element which value is to be submitted on sendButtonId click. |

_Usage_

const imap = new ImapChat();
imap.setInputID('#msg'); // #msg using the HTML snippet provided above.

setOnLocalJoin([function] callback) Sets ImapChat.onLocalJoin option.

   

_Options_

| Name | Type | Description | |--------------------|----------|---------------------------------------------------------------| | callback | function | Sets a function that is called when a clients joins a chat room(Only Joined client will see this). An argument containing the initial payload(ImapChat.setInstanceData) is passed to this function. |

_Usage_

const onLocalJoin = function (payload) {
  return `<div style="text-align: center">You Joined room as ${payload.name}.</div>`;
};

const imap = new ImapChat();
imap.setOnLocalJoin(onLocalJoin);

setOnClientJoin([function] callback) Sets ImapChat.onClientJoin option.

   

_Options_

| Name | Type | Description | |--------------------|----------|---------------------------------------------------------------| | callback | function | Sets a function that is called when a new clients joins an existing room (Joined client won't see this). An argument containing the initial payload(ImapChat.setInstanceData) is passed to this function. |

_Usage_

const onClientJoin = function (payload) {
  return `<div>${payload.name} Joined the chat.</div>`
};

const imap = new ImapChat();
imap.setOnClientJoin(onClientJoin);

setSendTPL([function] callback) Sets ImapChat.sendTPL option.

   

_Options_

| Name | Type | Description | |--------------------|----------|--------------------------------------------------------| | callback | function | Sets function that returns the HTML elements of how sent message will be rendered in ImapChat.messageContainerId container. An argument containing the initial payload(ImapChat.setInstanceData with msg) is passed to this function. |

_Usage_

const sent = function (payload) {
    return `<div class="container">
      <div>Me</div>
      <div class="content">${payload.msg}</div>
    </div>`
};

const imap = new ImapChat();
imap.setSendTPL(sent);

setReceiveTPL([function] callback) Sets ImapChat.receiveTPL option.

   

_Options_

| Name | Type | Description | |--------------------|----------|--------------------------------------------------------| | callback | function | Sets function that returns the HTML elements of how received message will be rendered in ImapChat.messageContainerId container. An argument containing the client(who sent the message) payload(ImapChat.setInstanceData with msg) is passed to this function. |

_Usage_

const received = function (payload) {
    return `<div class="container">
      <div>${payload.name}</div>
      <div class="content">${payload.msg}</div>
    </div>`
};

const imap = new ImapChat();
imap.setReceiveTPL(received);

setMutateBeforeSend([function] callback) Sets ImapChat.mutateBeforeSend option.

   

_Options_

| Name | Type | Description | |--------------------|----------|--------------------------------------------------------| | callback | function | Sets a function that is called before payload is sent to server. |

_Usage_

// Add time to payload before sending it to server
const mutateAddTime = function (payload) {
  payload.time  = new Date().toLocaleTimeString();
  return payload;
};

const imap = new ImapChat();
imap.setMutateBeforeSend(mutateAddTime);

setMutateOnReceive([function] callback) Sets ImapChat.mutateOnReceive option.

   

_Options_

| Name | Type | Description | |--------------------|----------|--------------------------------------------------------| | callback | function | Sets a function that is called when a response is gotten from server. |

_Usage_

// Replace :) with ? (Note: this can also be done in the setReceiveTPL(() => {...here}))
const mutateAddEmoji = function (payload) {
  payload.msg = payload.msg.replace(':)', '?');
  return payload;
};

const imap = new ImapChat();
imap.setMutateOnReceive(mutateAddEmoji);

run([boolean] sandbox) Starts chat client.

   

_Options_

| Name | Type | Description | |--------------------|----------|--------------------------------------------------------| | sandbox | boolean | If set to true, a chat prototype is generated. This comes in handy for UI development. |

_Usage_

const imap = new ImapChat({
    instanceData: {name: 'foo', email: 'foo@bar,com'},
    messageContainerId: '#messages',
    inputID: '#msg',
    sendButtonId: '#send-msg',
    onLocalJoin: onLocalJoin,
    onClientJoin: onClientJoin,
    sendTPL: sent,
    receiveTPL: received,
    mutateBeforeSend: mutateAddImageAndTime,
    mutateOnReceive: mutateAddImageAndTime
});
imap.run(true);

  Classes of chrys ugwu  >  PHP Chat Application  >  Download Download .zip .tar.gz  >  Support forum Support forum  >  Blog Blog  >  RSS 1.0 feed RSS 2.0 feed Latest changes  
Name: PHP Chat Application
Base name: chat-client
Description: Chat between Web users using Websockets
Version: 1.0.0
PHP version: 5
License: BSD License
All time users: 130 users
All time rank: 9237
Week users: 0 users
Week rank: 299 Equal
 
  Groups   Rate classes User ratings   Applications   Files Files  

  Groups  
Group folder image PHP 5 Classes using PHP 5 specific features View top rated classes


  User ratings  
Not yet rated by the users

  Applications that use this package  
No pages of applications that use this class were specified.

Add link image If you know an application of this package, send a message to the author to add a link here.

  Files folder image Files  
File Role Description
Files folder imageApp (1 file)
Files folder imagejs (1 file)
Plain text file composer.json Data Auxiliary data
Plain text file composer.lock Data Auxiliary data
HTML file index.html Doc. Documentation
Plain text file README.md Doc. Documentation
Plain text file socket.php Example Example script

  Files folder image Files  /  App  
File Role Description
  Plain text file Chat.php Class Class source

  Files folder image Files  /  js  
File Role Description
  Plain text file imapChat.js Data Auxiliary data

Install with Composer Install with Composer - Download Download all files: chat-client.tar.gz chat-client.zip
NOTICE: if you are using a download manager program like 'GetRight', please Login before trying to download this archive.
For more information send a message to info at phpclasses dot org.