Asynchronous, Bidirectional Connected Chat App with SSE in PHP

CreativeGP — Fri, 27 Jul 2018 09:05:58 +0000

Yesterday, I created a simple, useless chat app to study the asynchronous bidirectional connection with PHP.

You can use it here, and get the source code here (I don't understand enough what it means to disclose the server-side script. I wanna show the beginners an example with SSE and believe there's no vuln and no one wouldn't do something bad :))

At first, I wanted to learn WebRTC and coded, but the code didn't work because of the hard restriction of my shared server. So, I tried some techs, and I found the SSE works properly.

What is the asynchronous / bi-directional connection 🙄 ?

Usually, you use the synchronous, server->client connection while surfing the Internet. This post is the well-explained this type of connections, this is called HTTP.

What happens when you type 'google.com' into a browser and press Enter?

Anton Frattaroli ・ Jul 19 '18

#webdev

In contrast to that, the asynchronous connection allows you to talk to the server without your any actions.

And the bidirectional connection allows the server to talk to you without your any actions.

These special connections are required when you want to create a real-time web application with lesser amount of the transferred data.

Technologies 😎

There are several techs to support asynchronous/bidirectional connections.

What technology will you use when you want to create a chat app? The Websocket Protocol (bidirectional, asynchronous connection between the server and the client) or WebRTC or the basic client-server-database architecture is the common way to do that. I've tested WebRTC and The WebSocket Protocol and these ways didn't work properly in this server due to the hard restriction.

Let's check them a bit.

Ajax 😋

Asynchronous connection with JavaScript.

WebRTC 🤩

This is a group of specifications to do P2P connection (client<->client, async). In PHP, there's some great libraries to do it easily:

Hoa
ReactPHP

WebSocket 📰

The WebSocket Protocol is a protocol to do async, bi-directional connection.

Comet 💫

This is a hack to manage to allow the server to talk to the client asynchronously, works over HTTP. The point is keeping from responding for a long time.

First, the client send the request to the server. Although usually the server respond to it immediately, in this time, the server keeps from responding. Then the server uses the kept response when it has something has to tell the client (event). The client gets the response and send the request again for the next event. Very nice idea!

However, there even are some problems in Comet. For example, what if the event happens while the previous event is transferred ? It would cause a lag.

SSE 😲

SSE (Server-Sent Events) is an another tech to do async, server->client connection over HTTP. It mightn't be well-known, but the specification is very simple and it's very easy to implement.

This is an evolved Comet. First, the client sends the request to the server, and the server keeps from responding. When an event happens, the sever send the response but as a chunk data. So the connection won't terminate.

Summary 👍

I used SSE and it works properly. Now, I can use asynchronous, bidirectional connection even in shared servers!

Although it's not complete, I think the SSE is a good alternative to the WebSocket. And it should be used more.

To implement, I recommend you to read the very simple specification and some great blogs. And you may check my code for your reference.

Thank you.

Keeping a diary on the Internet

CreativeGP — Sun, 27 May 2018 01:32:48 +0000

This is my first post to DEV.

Who are you?

I am a fifteen-year-old boy in Japan loves computer programming.
I've made some apps before (you can find it at here).
And I created a new web application to keep a diary on the Internet once again.

CGP Diary

This application is available here.
You can find the repository on GitHub, here.

This small web application is very convenient to keep a diary ON THE INTERNET.
And this stores the data on your PC only (browser's localStorage), so you can write anything that you want to write with security...

Keeping a diary is VERY IMPORTANT and meaningful action.
The memory on your brain changes by the second. The hings which your brain judges unnecessary will disappears after few seconds all too soon.
So people have written down.

Local vs Online

What do you think about keeping a diary on the Internet?
To be honest, I prefer to keep it in the real world personally.
Let's discuss pros and cons of the two ways to keep a diary.
I wrote the pros only because cons of one way is always pros of the other way.

Pros of writing the date on the Internet

One of the most biggest pros is its convenience.
Nowadays, many people wear a device can connect the Internet next their skin.
So, they can write it at ease whenever they want to do it.
And the imformation on the Internet never dies theoretically. As long as the data is stored on a server, you (anyone if you want) can read the diary forever.
Furthermore, it's easy to look back over the past by reading the diary.
Things in the real world rots anon and you may forget the places stored the stacked diaries.

Pros of writing the date in the real world

As I wrote above, the way uses the Internet is convenient because people can write a diary whenever they wanna do.
However, for those don't have portable devices or if you want to write a diary whenever in a true sense, this way is more suitable.
And the things in the real world have unlimitted imformation.
Shape of the letter, sort of the paper or the ink, and so on.
It is very fun to examine those metadatas when you read the diary and look back over the past.

Summary

Anyway, I recommend keeping a diary in either way.
And, if you decided to store it on the Internet, you must use this application :)