batch-3-event-1

How to Create Long Polling Chat Using Mesosfer

This tutorial is about How to Create Long Polling Chat using Mesosfer.

Table of Contents

  1. 1. Introduction
  2. 2. Prerequisites
  3. 3. Create UI
  4. 4. Create index.php
  5. 5. Create chat.php
  6. 6. Screenshots
  7. 7. Download source

1. Introduction

In this tutorial we will implement AJAX long-polling in simple chat application. Long-Polling is one of Push Technology types. It is an internet based communication in which request for transaction can be given.

AJAX enables client to receive data from server in short interval such as 0.5 second (Traditional Polling). It causes low performance on server because there’s too much connection received since the server calculates each response and sends it back, just like normal HTTP traffic. To reduce the server load, the number of connection needed is reduced because the connection is terminated only when server has something new to give (Long Polling).

2. Prerequisites

  • Sign up for an account in Mesosfer Backend as a Service
  • Create an Application
  • Create a Bucket and add colomns:
    • name: String
    • message: String
    • timestamp: Number
  • Create a new user
  • CSS Framework Bootstrap
  • Javascript Framework JQuery
  • PHP:
    • guzzlehttp/guzzle
    • respect/rest
    • symfony/http-foundation

3. Create UI

To fasten user interface development, you need CSS Framework Bootstrap and also javascript library, JQuery, to implement AJAX. Installation can be done by adding code below in html.

HTML

Javascript

4. Create index.php

To handle request from client through AJAX, server side requires some library packages. Previously, you have to install package by running the code below through Command Prompt/Terminal.

You have to create 2 router for receive and provide data through URI /messages.

Posting message

To receive request post from client.

Explanation

Function to receive input from the form.

Calling function to save data to Mesosfer Cloud which you have to create the next.

To return the response to client in JSon format.

Get message using Long-Polling method

Explanation

  1. First, you have to define the time for timeout and restart the connection. In this example, use time() + 10. It means 10 seconds after the time of the function call.
  2. Next you can create a variable $lastInsertTime of query parameters and variables $currentTime with null values to be used in the next process. On the first call, the value of $currentTime is equal to null. Then on the next call, the $currentTime will change.
  3. If the process happens before the deadline, then it will get the data from the Mesosfer cloud and sorted by descending. Value of the timestamp from the last data will be given to the variable $currentTime.
    If the value of $currentTime and $lastInsertTime is different, that means the data has a value of more than $lastInsertTime timestamp will be displayed.
  4. Then json response will be returned and looping back to the second step.
  5.  Else, request will sleep for 7 seconds and repeat the query until new data is picked up or the time limit has been reached.

Put it all together

4. Create the chat.php

Create a new file chat.php. It contains function to connect with Cloud Mesosfer using HTTP Client.

Put it all together

6. Screenshots

long-polling-5
long-polling-4

7. Download source

You can download all the source code of this tutorial here

.