JeuWeb - Crée ton jeu par navigateur
Technologie pour un tchat - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Technologie pour un tchat (/showthread.php?tid=6269)

Pages : 1 2 3


RE: Technologie pour un tchat - Sephi-Chan - 25-07-2012

Je ne pense pas que IRC soit top puisque les canaux ne peuvent qu'être protégés par un mot de passe, et donc tout le monde peut rejoindre tous les canaux.

À l'inverse, ce genre de chat est plutôt facile à implémenter avec un outil de push. Les discussions privées (à deux ou plus) sont triviales à implémenter puisqu'elles ne sont qu'une extension du canal privé. La sonnerie en cas de mention du nom est plutôt simple également : tout ça reste du Javascript assez basique.

Il faut que tu sois précis si tu veux de l'aide. Qu'est-ce que tu ne comprends pas dans l'API de PubNub ?


RE: Technologie pour un tchat - Th3kid - 25-07-2012

Soit je suis pas tombé sur la bonne API soit je comprends pas leur code.

Il y a des exemples qui ne fonctionne pas ou ne sont pas pertinent.
http://blog.pubnub.com/build-real-time-chat-10-lines-code/ Dans cette exemple, je n'ai pas réussi a le mettre en ligne avec mes informations ( cad changer demo dans <div id=pubnub pub-key=demo sub-key=demo> )

Ou http://www.pubnub.com/account-javascript-api-include qui semble donner un début et dire "This gives you access to PUBNUB.publish() and PUBNUB.subscribe() functions and more! " mais le more semble pas vraiment présent.

Je n'ai rien trouvé de vraiment concret pour le Jquery/javascript.

Les seules choses que j'ai trouvé qui semble intéressante c'est ceci pour le php.
Code :
<?php

/**
* PubNub 3.0 Real-time Push Cloud API
*
* @author Stephen Blum
* @package Pubnub
*/
class Pubnub {
    private $ORIGIN = 'pubsub.pubnub.com';
    private $PUBLISH_KEY = 'demo';
    private $SUBSCRIBE_KEY = 'demo';
    private $SECRET_KEY = false;
    private $SSL = false;

    /**
* Pubnub
*
* Init the Pubnub Client API
*
* @param string $publish_key required key to send messages.
* @param string $subscribe_key required key to receive messages.
* @param string $secret_key optional key to sign messages.
* @param string $origin optional setting for cloud origin.
* @param boolean $ssl required for 2048 bit encrypted messages.
*/
    function Pubnub(
        $publish_key = 'demo',
        $subscribe_key = 'demo',
        $secret_key = false,
        $ssl = false,
        $origin = false
    ) {
        $this->PUBLISH_KEY = $publish_key;
        $this->SUBSCRIBE_KEY = $subscribe_key;
        $this->SECRET_KEY = $secret_key;
        $this->SSL = $ssl;

        if ($origin) $this->ORIGIN = $origin;

        if ($ssl) $this->ORIGIN = 'https://' . $this->ORIGIN;
        else $this->ORIGIN = 'http://' . $this->ORIGIN;
    }

    /**
* Publish
*
* Send a message to a channel.
*
* @param array $args with channel and message.
* @return array success information.
*/
    function publish($args) {
        ## Fail if bad input.
        if (!($args['channel'] && $args['message'])) {
            echo('Missing Channel or Message');
            return false;
        }

        ## Capture User Input
        $channel = $args['channel'];
        $message = json_encode($args['message']);

        ## Generate String to Sign
        $string_to_sign = implode( '/', array(
            $this->PUBLISH_KEY,
            $this->SUBSCRIBE_KEY,
            $this->SECRET_KEY,
            $channel,
            $message
        ) );

        ## Sign Message
        $signature = $this->SECRET_KEY ? md5($string_to_sign) : '0';

        ## Send Message
        return $this->_request(array(
            'publish',
            $this->PUBLISH_KEY,
            $this->SUBSCRIBE_KEY,
            $signature,
            $channel,
            '0',
            $message
        ));
    }

    /**
* Subscribe
*
* This is BLOCKING.
* Listen for a message on a channel.
*
* @param array $args with channel and message.
* @return mixed false on fail, array on success.
*/
    function subscribe($args) {
        ## Capture User Input
        $channel = $args['channel'];
        $callback = $args['callback'];
        $timetoken = isset($args['timetoken']) ? $args['timetoken'] : '0';

        ## Fail if missing channel
        if (!$channel) {
            echo("Missing Channel.\n");
            return false;
        }

        ## Fail if missing callback
        if (!$callback) {
            echo("Missing Callback.\n");
            return false;
        }

        ## Begin Recusive Subscribe
        try {
            ## Wait for Message
            $response = $this->_request(array(
                'subscribe',
                $this->SUBSCRIBE_KEY,
                $channel,
                '0',
                $timetoken
            ));

            $messages = $response[0];
            $args['timetoken'] = $response[1];

            ## If it was a timeout
            if (!count($messages)) {
                return $this->subscribe($args);
            }

            ## Run user Callback and Reconnect if user permits.
            foreach ($messages as $message) {
                if (!$callback($message)) return;
            }

            ## Keep Listening.
            return $this->subscribe($args);
        }
        catch (Exception $error) {
            sleep(1);
            return $this->subscribe($args);
        }
    }

    /**
* History
*
* Load history from a channel.
*
* @param array $args with 'channel' and 'limit'.
* @return mixed false on fail, array on success.
*/
    function history($args) {
        ## Capture User Input
        $limit = +$args['limit'] ? +$args['limit'] : 10;
        $channel = $args['channel'];

        ## Fail if bad input.
        if (!$channel) {
            echo('Missing Channel');
            return false;
        }

        ## Get History
        return $this->_request(array(
            'history',
            $this->SUBSCRIBE_KEY,
            $channel,
            '0',
            $limit
        ));
    }

    /**
* Time
*
* Timestamp from PubNub Cloud.
*
* @return int timestamp.
*/
    function time() {
        ## Get History
        $response = $this->_request(array(
            'time',
            '0'
        ));

        return $response[0];
    }

    /**
* Request URL
*
* @param array $request of url directories.
* @return array from JSON response.
*/
    private function _request($request) {
        $request = array_map( 'Pubnub::_encode', $request );
        array_unshift( $request, $this->ORIGIN );

        $ctx = stream_context_create(array(
            'http' => array( 'timeout' => 200 )
        ));

        return json_decode( @file_get_contents(
            implode( '/', $request ), 0, $ctx
        ), true );
    }

    /**
* Encode
*
* @param string $part of url directories.
* @return string encoded string.
*/
    private static function _encode($part) {
        return implode( '', array_map(
            'Pubnub::_encode_char', str_split($part)
        ) );
    }

    /**
* Encode Char
*
* @param string $char val.
* @return string encoded char.
*/
    private static function _encode_char($char) {
        if (strpos( ' ~`!@#$%^&*()+=[]\\{}|;\':",./<>?', $char ) === false)
            return $char;
        return rawurlencode($char);
    }
}


?>


Donc voila un peut ce que j'ai trouvé mais pas encore vraiment beaucoup regardé.

Ça semble quand même bien brouillon moi qui suit habitué a lire l'aide de Jquery, ici je ne me repère pas dans ou sont les fonctions, a quoi servent elles et comment les utiliser.


RE: Technologie pour un tchat - Maks - 25-07-2012

A mon avis c'est toi qui ne comprend pas leur code ^^ Excepté ton premier lien, où ils ont une curieuse (pour ne pas dire dangereuse) façon de sanitize leurs données, je ne vois rien de manquant ?

Citation : Ça semble quand même bien brouillon moi qui suit habitué a lire l'aide de Jquery, ici je ne me repère pas dans ou sont les fonctions, a quoi servent elles et comment les utiliser.

C'est le problème quand on "apprend" le framework avant de maitriser le langage Wink


RE: Technologie pour un tchat - Th3kid - 26-07-2012

Maitriser quel langage ?
En cherchant les API javascript, je suis tombé sur 2 API différentes avec 1 tuto bizarre ( d'après moi). Rien a dire pour moi c'est pas décrit. Ils lancent les fonctions comme ça sans expliquer ^^; Enfin avis perso sur leur truc.


RE: Technologie pour un tchat - Maks - 26-07-2012

Les API officielles sont ici :

Javascript cross-browser : https://github.com/pubnub/pubnub-api/tree/master/javascript
Javascript "récent" : https://github.com/pubnub/pubnub-api/tree/master/javascript-modern

Regarde la première si tu ne sais pas quoi utiliser.

Dans ton head rajoute :

<script src="http://cdn.pubnub.com/pubnub-3.1.min.js"></script>
(ils ont cassé leur touche guillemet en même temps que la touche point virgule pour leur API on dirait)

Ensuite il faut mettre une <div> visiblement, je sais pas pourquoi, faudra peut être cherché un peu.

    
var pubnub = PUBNUB({
publish_key : 'PUBLISH_KEY_HERE',
subscribe_key : 'SUBSCRIBE_KEY_HERE',
ssl : false,
origin : 'pubsub.pubnub.com'
});

Ensuite là tu remplies avec les deux clés que tu as eu lorsque tu t'es inscrit.

Imaginons que je créé une div qui contiendra les messages


<div id='messages'></div>


pubnub.subscribe({
restore : true,
connect : nom_de_la_fonction_qui_permet_de_send_un_message, // si tu veux envoyer un message à la connexion
channel : 'nom_du_canal',
callback : function(message) {
// fonction qui s’exécute lorsque tu reçois un message
$('#messages').prepend('connexion effectuée !<br />');
},
disconnect : function() {
// fonction qui s'execute lorsqu'on perd la connexion
}
});

Ensuite imaginons que tu es un formulaire


<form method="POST">
<input type="text" id="input" />
<input type="button" value="ok" />
</form>

Tu envoies un message


$('#input').submit(function(e) {

pubnub.publish({
channel : 'nom_du_canal',
message : { content : $('#input').val() },
callback : function(info) {
// fonction qui s'execute une fois que le serveur répond, voir si tout s'est bien passé toussa
console.log(JSON.stringify(info));
}
});
e.preventDefault();
});

Et c'est tout ? Bon après idéalement on pourrait séparer les données reçues de la présentation HTML.

C'est à peu près ce que ta classe PHP fait je pense. Du coup je pense que c'est un problème de langage, j'ai l'impression qu'il t'aurait presque fallu un plugin jQuery pour faire ça...


RE: Technologie pour un tchat - Th3kid - 26-07-2012

T'as testé toi même ?

Voila déjà ce que j'ai :

Erreur : PUBNUB is not a function
Fichier Source : http://localhost/test/tchatjeuweb.php
Ligne : 10

Avec en ligne 10 ' var pubnub = PUBNUB({ '


J'avais déjà testé en partie leur code hier avec ce que tu as mis.

    
var pubnub = PUBNUB({
publish_key : 'PUBLISH_KEY_HERE',
subscribe_key : 'SUBSCRIBE_KEY_HERE',
ssl : false,
origin : 'pubsub.pubnub.com'
});
Je présume que tu as du prendre ce code directement de leur API, donc voici ce que tu trouves plus loin dans l'API.
  var pubnub = PUBNUB.init({
publish_key : 'demo',
subscribe_key : 'demo'
});

Donc il faut rajouter le .init sinon ça ne marche pas. Voila pourquoi je dis que c'est foireux leur truc ... Tu prends leur code et il y a des erreurs.


RE: Technologie pour un tchat - Maks - 26-07-2012

Non je préfère utiliser Node Wink
Du coup je n'ai pas de compte PubNub pour tester.


RE: Technologie pour un tchat - Maks - 26-07-2012

Ah oui en effet il se sont peut être trompés... Ca m'ai déjà arrivé aussi de tomber sur des API pas à jour, du coup t'es obligé de regarder le code source.

Mais après l'init tu as réussi à faire quelque chose ?


RE: Technologie pour un tchat - Murthy - 26-07-2012

non il n'y a pas d'erreur mais il ne sont pas partisans du tout fait. Normalement si t'es dev et que tu veux utiliser leur système tu t'y connais un peu et sais quoi faire.

Chez moi ça marche nickel depuis un bon moment ;-)

EDIT : pardon, j'ai cliqué un peu vite pour poster. Je n'ai pas d'init de mon côté. Je pourrais te filer mon code si nécessaire pour te servir d'exemple.


RE: Technologie pour un tchat - Th3kid - 27-07-2012

Tout fonctionne parfaitement depuis un moment déjà, merci ^^.

En local et en ligne, l'envoie de message et la réceptions et même un historique pour quand un joueur arrive au milieu d'une discussion pour savoir ce qui c'est dit avant :p

Mais voila, entre pas partisans du tout fait et une API pas complète avec des fautes c'est pas pareil. On a beau s'y connaitre un minimun, on ne peut pas deviner les fonctions et ressources qui sont disponible sans les avoirs lue quelques part et encore moins les paramètres nécessaire. Il y a des options callback ou autre dans toutes leurs fonctions et a part tester directement et interpréter ce qui arrive, il est difficile de trouver la doc exacte de ce qui est renvoyé.

Des que j'aurais terminé je posterais mon code pour les prochains qui s'y intéressent Smile