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'
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>
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.
- End-to-End Encryption by AES GCM
- Forward Secrecy by ECDH
- Public Key Authentication like SSH
- via Piping Server
- Static hosting
- Progressive Web App (PWA)
- Accountless
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.
Oldest comments (4)
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.
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?
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 :)
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