Socketize will be shutting down soon. We are not accepting new registrations. Sorry about this.

Quick Start

We will create a message board app with authentication.

Create a Socketize account. A default application will be created for you. Copy the public key of the application.

Create an HTML file or use any existing file and add the following code in your head section.

<script src="https://socketize.com/v1/socketize.min.js"></script>

HTML

Add these elements in your HTML:

<button id="register-btn" onclick="socketize.showRegisterModal();">Register</button>
<button id="login-btn" onclick="socketize.showLoginModal();">Login</button>

<ul id="messages"></ul>
<input type="text" id="message-input">
<button type="button" id="post-btn">Post</button>

JavaScript

Place these in a script tag before closing your body tag:

First initialize the app with our credentials

var params = {public_key: 'your_application_public_key'};
var socketize = new Socketize.client(params);

Whenever the Post button is clicked we will push item to our list named messages which is in public scope.

document.getElementById('post-btn').onclick = function () {
    var message = document.getElementById('message-input').value;

    // Push message to a list on Socketize server
    socketize.pushOnList('public/messages', {
        text: message,
    }).then(function (response) {
        // Callback! Message added successfully.
        // Empty textbox
        document.getElementById('message-input').value = '';
        // Append item to ul
        document.getElementById('messages').insertAdjacentHTML('beforeend', '<li>' + message + '</li>');
    }).catch(function (error) {
        // Callback! Failed/error.
        alert(error.message);
    });
};

Load all existing messages

// Load messages
socketize.getListItems('public/messages').then(function (response) {
    // Success callback

    // Loop through all the items
    for (var i = 0; i < response.length; i++) {
        var message = response[i];
        // Add items to ul
        var liHtml = '<li>' + (message.username ? message.username + ' says: ' : '' ) + message.text + '</li>';
        document.getElementById('messages').insertAdjacentHTML('beforeend', liHtml);
    }
});

Subscribe to new messages, we will receive every new message here in realtime:

socketize.subscribeToKey('public/messages', function(message) {
    // Add items to ul
    var liHtml = '<li>' + (message.username ? message.username + ' says: ' : '' ) + message.text + '</li>';
    document.getElementById('messages').insertAdjacentHTML('beforeend', liHtml);
});

Register some events

socketize.on('login', function (user) {
    alert('Logged in!');
    document.getElementById('post-btn').innerHTML = 'Post as ' +  user.username;
});

socketize.on('logout', function () {
    document.getElementById('post-btn').innerHTML = 'Post';
});

socketize.on('register', function () {
    alert('You\'ve registered successfully!');
});

Lift some security

Finally, go to your Dashboard > Roles, click Manage near Default User Role. Check "Can Write Publicly Readable Data" and save. Note, we're lifting some Security here. This is for our testing purpose, uncheck it after you're done.

Add username with every message (optional)

If you want to add username with every message, you can do so. Go to Filter you will see a code box, paste the line below and click Save.

if (request.command == 'push_on_list' && request.params.key == 'messages') {
    if (request.user) request.params.value.username = request.user.username;
}

Filter is a convenient way to hook into every client request on server side (Learn more). Here we're adding username with every message, we could add it from client side too, but then username would be open to manipulation.

That's it!

Now you've a WebSocket powered message board with authentication, all these without any server side code.

Check the demo here and full code here.