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 ・ 5 min read

#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.