To demonstrate how to subscribe to our WebSocket endpoint with Javascript, We will create a simple chat script, in just 5 minutes.
WebSocket API is supported in all modern browsers and we do not need to install any libraries to subscribe to a WebSocket channel.
You may also use our official Javascrtip SDK: PieSocketJS
Create an HTML file, lets say piesocket.html
and add some a basic web page structure to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PieSocket Tester</title>
</head>
<body>
</body>
</html>
Add the following Javascript into a script tag inside the HTML file to connect to the WebSocket channel
var apiKey = 'oCdCMcMPQpbvNjUIzqtvF1d2X2okWpDQj4AwARJuAgtjhzKxVEjQU6IdCjwm';
var channelId = 1;
var piesocket = new WebSocket(`wss://demo.websocket.me/v3/${channelId}?api_key=${apiKey}¬ify_self`);
Let's add some code that will be triggered whenever we receive a message on the WebSocket channel.
var apiKey = piesocket.onmessage = function(message) {
alert(`Incoming message: ${message.data}`);
}
Let's add some more HTML to build a minimal chat UI
<div id="chatLog">
</div>
<div id="chatFormContainer">
<form id="chatForm">
<input id="chatMessage" placeholder="Type message and press enter..." type="text">
</form>
</div>
Let's modify our onmessage
so it handles our messages as needed
piesocket.onmessage = function(message) {
var payload = JSON.parse(message.data);
console.log(payload);
if (payload.sender == username) {
payload.sender = "You";
}
if (payload.event == "new_message") {
//Handle new message
chatLog.insertAdjacentHTML('afterend', ` ${payload.sender}: ${payload.text} `);
} else if (payload.event == 'new_joining') {
//Handle new joining
chatLog.insertAdjacentHTML('afterend', ` ${payload.sender} joined the chat`);
}
}
The Websocket client is now ready to handle new_message
and new_joining
events, let's trigger those events by publishing a message to our WebSocket channel.
We will publish new_message
when a user submits the chat form by pressing enter.
And, new_joining
when someone joins the channel.
{warning} We should publish messages from server-side for better security.
For the sake of simplicity of this demo, we have enabled C2C communication for the demo API from PieSocket API settings, so that we can send messages directly from the WebSocket client without a backend.
Let's publish!
This is triggered when the websocket connection is established.
var username = `user_${getRandomNumber()}`
piesocket.onopen = function() {
console.log(`Websocket connected`);
//Let others know I have arrived!
piesocket.send(JSON.stringify({
event: 'new_joining',
sender: username,
}));
}
This function is triggered when the form is submitted.
function sendMessage(e) {
e.preventDefault();
var message = document.getElementById('chatMessage').value;
//Let others know what I have to say
piesocket.send(JSON.stringify({
event: 'new_message',
sender: username,
text: message
}));
}
And this completes our simple WebSocket chat web-app
To test this web-app, copy the full code given below and save it into an HTML file. Then, open the HTML file into multiple tabs, send message from one tab and check in other tabs. Voila!
Here is the full working code, Happy chatting with yourself!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test PieSocket</title>
<style>
#chatFormContainer {
text-align: center;
position: fixed;
bottom: 5px;
left: 5px;
right: 5px;
}
#chatFormContainer input {
display: inline-block;
width: 90%;
padding: 20px;
}
</style>
</head>
<body>
<div id="chatLog">
</div>
<div id="chatFormContainer">
<form id="chatForm">
<input id="chatMessage" placeholder="Type message and press enter..." type="text">
</form>
</div>
<script>
var username = `user_${getRandomNumber()}`
var apiKey = 'oCdCMcMPQpbvNjUIzqtvF1d2X2okWpDQj4AwARJuAgtjhzKxVEjQU6IdCjwm';
var channelId = 1;
var piesocket = new WebSocket(`wss://demo.websocket.me/v3/${channelId}?api_key=${apiKey}¬ify_self`);
var chatLog = document.getElementById('chatLog');
var chatForm = document.getElementById('chatForm');
chatForm.addEventListener("submit", sendMessage);
piesocket.onopen = function() {
console.log(`Websocket connected`);
piesocket.send(JSON.stringify({
event: 'new_joining',
sender: username,
}));
}
piesocket.onmessage = function(message) {
var payload = JSON.parse(message.data);
console.log(payload);
if (payload.sender == username) {
payload.sender = "You";
}
if (payload.event == "new_message") {
//Handle new message
chatLog.insertAdjacentHTML('afterend', `<div> ${payload.sender}: ${payload.text} <div>`);
} else if (payload.event == 'new_joining') {
//Handle new joining
chatLog.insertAdjacentHTML('afterend', `<div> ${payload.sender} joined the chat<div>`);
}
}
function getRandomNumber() {
return Math.floor(Math.random() * 1000);
}
function sendMessage(e) {
e.preventDefault();
var message = document.getElementById('chatMessage').value;
piesocket.send(JSON.stringify({
event: 'new_message',
sender: username,
text: message
}));
}
</script>
</body>
</html>
Facing difficulties? Use the chat box on the bottom-right corner of this page to reach us.