<h3>Auth chat</h3>
<div class="note">
    <p><a href="https://github.com/CppComet/auth-example">Git repository with all code of this example.</a></p> 
    <p>In this example show how authenticate on CppComet and how send personal messages to users via CppComet</p> 
    
    <ul>
        <li><a href="http://comet-server.org/doku.php/en" target="_blank">More info about CppComet</a></li>
        <li><a href="http://comet-server.org/doku.php/en:comet:cometql"  target="_blank">More info about CometQL</a></li>
        <li><a href="http://comet-server.org/doku.php/en:comet:authentication"  target="_blank">More info about auth in CppComet</a></li> 
    </ul>
    
    <p>
        Open the example in two or more browsers, Copy your `USER_ID` from one 
        window and paste it into another window in the field labeled 
        'Identificator of user who must will receive the message` 
        enter the message text and press send. You will see that the message 
        will come only to the window with the same USER_ID you specified when 
        sending it.
    </p> 
</div>
<div class="root"> 
    <hr>
    <div><span id="userId"></span> - use this id to send message</div>
    <hr>
    <div class="status">
        We are waiting for authorization on the comet server
    </div>
    <hr>
    <input type="text" placeholder="Message" id="text"> - Personal text message for user<br>
    <input type="text" placeholder="user_id" id="to_user_id"> - Identificator of user who must will receive the message<br>
    <button onclick="send($('#to_user_id').val(), $('#text').val())">Send</button>
    <hr>
    <div id="log"></div>
</div>
 

hr{
    clear:both;
}

.hide{
    display:none;
}

#log{
    color:#000
}
.status{
    color:#272;
    font-weight:bold;
}

.note{
    background:#eee;
    padding:1px 10px;
    margin:5px;
    border-radius:5px;
    text-align:justify;
}

function log()
{
    console.log(arguments);
    $("#log").append(JSON.stringify(arguments)+"<hr>");
}

// Authorization on comets server
function auth()
{
    var user_id = 0;
    
    try{
        user_id = localStorage['user_id']
    }catch(e){ 
        user_id = Math.floor(Math.random()*1000000)
    } 
     
    if(!user_id)
    {
        user_id = Math.floor(Math.random()*1000000)
        localStorage['user_id'] = user_id
    }

    $("#userId").text("USER_ID = "+user_id);
    log("Request authorization for user_id="+user_id)
    var user_key = "PassForUser"+user_id

    //  The first step – it is sending user’s ID and a random hash in your system to the comet-server via CometQL.
    //  auth.php ( https://github.com/CppComet/auth-example/blob/master/auth.php )
    return $.when($.ajax({
        url: "https://comet-server.com/doc/CometQL/auth-chat/auth.php?user_id="+user_id+"&user_key="+user_key+"&t="+Math.floor(Math.random()*1000000),
        type: "GET",
        dataType:'json',
    })).always(function(res){
        $(".status").html("We are waiting for connection to the comet server");
        
        // The function start accepts connection settings and opens new connection. 
        // https://comet-server.com/wiki/doku.php/en:comet:javascript_api#connection_with_server
        cometApi.start({
            node: "app.comet-server.ru",
            dev_id: 15,
            user_id:user_id,
            user_key:user_key,
        })
    }).promise();
}

/**
 * 
 * @param {integer} user_id  
 * @param {string} text 
 */
function send(user_id, text)
{
    // Send message
    // send.php ( https://github.com/CppComet/auth-example/blob/master/send.php )
    $.ajax({
        url: "https://comet-server.com/doc/CometQL/auth-chat/send.php?user_id="+user_id+"&msg="+text+"&t="+Math.floor(Math.random()*1000000),
        type: "GET", 
    })
}

cometApi.onAuthSuccess(function()
{
    // We will initialize the call after successful authorization on the comet server.
    $(".StartCallBtn").removeClass("hide");
    log("Authorization on the comet server is complete")
    $(".status").html("Authorization on the comet server is complete");
    cometApi.getTrackPipeUsers("track_authExample", function(){
        log(e)
    })
})

cometApi.subscription("msg.message", function(e){ 
    log(e)
})

cometApi.subscription("track_authExample.subscription", function(msg)
{
    log(msg) 
});	

cometApi.subscription("track_authExample.unsubscription", function(msg)
{
    log(msg) 
});	

auth();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://comet-server.com/CometServerApi.js