DEV Community

loading...

Simple Chat over only HTTP without WebSocket and WebRTC

nwtgck profile image Ryo Ota Updated on ・2 min read

Hi all! I'd like to show you a simple text chat over HTTP/HTTPS using Piping Server, which was introduced in Data Streaming between Every Device over HTTP/HTTPS.

Demo video

Here is a simple demo video of the chat.

How to use Piping Server in JavaScript?

The purpose of Piping Server is data transfer.
Here is an usage. Send by POST method, Get by GET method.

// Send
fetch("https://ppng.io/mytext", {
  method: "POST",
  body: 'hello, world'
})

// Get
const res = await fetch("https://ppng.io/mytext")
await res.text() // === 'hello, world'
Enter fullscreen mode Exit fullscreen mode

You can change /mytext and "https://ppng.io" freely. An easy way to run Piping Server is using Heroku. You can click [Deploy to Heroku] on Piping Server on GitHub.

By using this, you can build a simple chat without WebSocket or WebRTC.

Try on CodePen

Codepen: https://codepen.io/nwtgck/pen/xNoKgx

Both CodePens are the same.

Full code

Here is the whole code of chat.

<html>
<head>
  <title>Simple Chat via Piping Server</title>
  <style>
    .me {
      text-align: right;
    }
  </style>
</head>
<body>
  <p>
    <input placeholder="Your ID" id='your_id'>
    <input placeholder="Peer ID" id='peer_id'>
    <button onclick='receiveLoop(this)'>Connect</button>
  </p>
  <p style='position: absolute; bottom: 0;'>
    <input placeholder="Message" id='message' size='50'>
    <button onclick="send()">Send</button>
  </p>

  <hr>
  <div id='talks'>
    <!--This will be added by JavaScript -->
  </div>
  <script>
    // Receive-loop
    async function receiveLoop(btn) {
      your_id.disabled = peer_id.disabled = btn.disabled = true;
      while(true) {
        try {
          // Get peer's response
          const res = await fetch(`https://ppng.io/${peer_id.value}-${your_id.value}`);
          // Create talk element
          const talk = document.createElement('div');
          // Set peer's message
          talk.innerText = await res.text();
          // Add peer's message
          talks.appendChild(talk);
        } catch(err) {
          console.error(err);
        }
      }
    }

    // Send your message
    function send() {
      // Send your message
      fetch(`https://ppng.io/${your_id.value}-${peer_id.value}`, {
        'method': 'POST',
        body: message.value
      });
      // Create talk element
      const talk = document.createElement('div');
      talk.innerText = message.value;
      talk.classList.add('me');
      talks.appendChild(talk);
      // Empty your message
      message.value = '';
    }
  </script>
</body>
<html>
Enter fullscreen mode Exit fullscreen mode

Secure chat via Piping Server

You can find more secure chat in the following. The application is written in Vue in TypeScript.
GitHub: https://github.com/nwtgck/piping-chat-web

The features are the following.

Thanks

@karanganesan told me that a simpler example will be useful. This is why I wrote this post. Thanks Karan!

can you share any simpler examples of using Piping Server like : only pure vanilla javascript and bare minimum like working chat using piping without any Vue JS or anything.

Discussion (4)

pic
Editor guide
Collapse
mmazzilli73 profile image
mmazzilli73 • Edited

Hi. I am NOT a dev but a PM. I am looking for an efficient strategy for a CLIENT to interrogate a SERVER about updates (just need a single bit. 0=no news sorry, 1=news you should update), without using WebSocket. I stumbled upon this page. a CHAT (not really a live chat, more like Whatsapp) is ONE of the things that brought me here, but I will use this UPDATE BIT also for other things.
Can somebody (please not in developerish) explain more about this PIPING SERVER. Is this an open project or a known technology or what. How does it work?
I started this quest thinking that the most efficient way of having a 0/1 answer from the server would be checking if a file is there... but I might be wrong (as it might stay almost a second waiting for an answer).. Any ideas? Help?
Thanks to all.
Marcello

Collapse
paulooosrj profile image
Paulo Sergio

It's a method untratable for this type of system. Is recomended using websockets. Example: when do you make the method generic of "long pooling" cause an side-effect in your code.

Collapse
nwtgck profile image
Ryo Ota Author • Edited

Thanks for your comment. I agree that WebSocket is a suitable choice to create such kind of application, chat. And, the chat was created to provide a simple example of Piping Server in JS for Karan.

One thing I'm not sure is what the side-effect means in this context. Could you give me an example?

Collapse
lennartschoch profile image
Lennart Schoch • Edited

What Paulo is saying is right. While your approach will result in a working application, I strongly discourage using long polling (whenever it can be avoided) especially on the client side. It will put a lot of unnecessary load on your server and will prevent it from scaling well. There is a reason why websockets are pretty much a best practice for chat application :)