Bonjour bonjour ! Toujours dans la catégorie : Moi et le JQuery ça fait 20 000, je viens vers vous pour un système de T'chat un peu bizarre ^^ Etape 1 : Récupération des utilisateurs via Facebook > OK Etape 2 : Lorsqu'on clic sur un nom d'utilisateur ça ouvre une fenêtre. Cette fenêtre est une "room" où il y aura les discussions entre les deux utilisateurs > Demi OK. Actuellement il existe 3 choses différentes. - Une fonction qui permet d'ouvrir une room avec avoir rentré son nom - Une fonction qui permet de rejoindre une room en cliquant dessus - Une fonction qui permet d'ajouter un ami dedans Il y aussi des fonctions qui permettent de voir les messages qu'on a écrit etc... Dans l'idée j'ai toutes les cartes en main, seulement mes mains n'y arrivent pas -_- Mon envie, c'est de cumuler plusieurs fonctions en une. Ou même plutôt de cumuler les trois précédemment cité en une seule, est-ce que c'est possible ? Avez-vous une idée de comment faire ça ? Fonction rejoindre une room [code] var curRoom = null; window.joinRoom = function(p_path) { if(curRoom != null) { $mx._sendMessage($mx.Message('j_', _UNSUB, curRoom, _ALL,_BK),{context:this,fun:'onRoomData'}); } curRoom = p_path; $mx._sendMessage($mx.Message('j_', _SUB, curRoom, _ALL,_BK),{context:this,fun:'onRoomData'}); $("#roomInput").show(); }[/code] Fonction inviter un ami [code] window.inviteFriend = function(authorType,roomId,friendType,friendId) { $mx._sendMessage($mx.Message('i_', _SUB, 'chat_room/invite_to_room/'+authorType+'/'+roomId, _ALL,'<content type="'+friendType+'" name="'+friendId+'"></content>'),{context:this,fun:'onFriendInvited'}); };[/code] Liste des rooms (J'aimerai d'ailleurs que ma liste de Room soit en fait mes amis dans mon "exemple", ce qui serait plus logique du coup) [code] window.onRooms = function(p_message) { var rooms = p_message.content.split('<content out="Rooms<br/>" for i="1,j=rooms.length;i<j;++i)"><a href="javascript:window.joinRoom(%5C''+rooms.split('path=">'+rooms.split('title="')[1].split('"')[0]+'</a>';
}
$("#rooms").html(out);
};[/code]

Fonction pour écrire dans une room
[code] window.ondataposted = function(p_message) {
$("#postToRoom").attr("value","Post");
$mx.sendMessage($mx.Message('p', _UNSUB, 'chat_room/post_to_room/facebook/'+curRoom.split('my_rooms/')[1], _ALL,''),{context:this,fun:'ondataposted'});
};[/code]

Bon je pense que ce problème est un chouia compliqué mais bon...Après je ne veux pas qu'on me mâche tout non plus, j'aimerai bien comprendre ce que je fais, ça m'évitera de poser des questions débiles par la suite -_-

Merci d'avance..</content>

9 réponses


Bonsoir, j'ai du mal à comprendre le système...

Si je résume ce que j'ai compris (merci de corriger si je me plante).

Tu as des utilisateurs sur ton site.

Je suis l'utilisateur A , je peux en cliquant sur un utilisateur B engager une conversation privée avec lui.

Par la suite je peux envoyer une invitation à un pseudo C afin qu'il rejoigne la discussion.

Par ailleurs une liste des salons ouverts est disponible et je peux cliquer sur l'un d'eux pour le rejoindre.

Question : Si D clique sur la room dans laquelle A,B et C sont, il peut la rejoindre sans conditions?

Veux tu faire un système qui ressemblerait à de l'irc avec la possibilité d'avoir des salons public et privée + discussions privées? (partie opérateur en moins)

Au delà de ces questions fonctionnelles, une question technique, comment est géré le système côté serveur? Dans quelle langage?

Enfin, que signifie "Demi Ok" ?

Pour finir, le système que tu souhaites faire me semble complexe, non pas pour le fonctionnement souhaité mais plutôt par l'aspect sécurité. En effet, imaginons que C ne soit pas autorisé à rejoindre la room dans laquelle A et B communiquent entre eux, comment tu sécurise l'échange (y compris les tentatives de manipulation javascript pour accéder aux messages de cette room) ?

Si cette question doit se poser, elle présente pour ma part un risque important sur la complexité du système. Elle doit donc être étudiée en amont de la conception pour être une contrainte technique à prendre en compte, faute de quoi, des rustines mises sur un système déjà conçu seraient sans doute un facteur de risque de sécurité très important.

En attente de réponses pour comprendre ce que tu cherches à faire,

cordialement

Antho

Salut Antho !
Tu as très bien résumé la chose, seulement quelques réponses vont devoir rester sans réponses, comme celle concernant le fonctionnement côté serveur. Pourquoi ? Et bien parce-que le code est fournit tel-quel et que nous ne savons absolument pas comment ça se passe niveau serveur. (Je dis nous car nous sommes plusieurs).

Concernant la sécurité ça n'est pas très grave, il s'agit pour l'instant de simuler des actions, c'est un prototype, donc autant dire qu'on s'en fiche, ccette version ne sera pas rendue publique et sera sans doute retravaillée.

Donc pour résumé

Un utilisateur A se connecte et voit sa liste d'amis.
Il décide de cliquer sur un utilisateur B, cela créé un salon (une room) et les deux personnes peuvent ainsi discuter ensembles. Quand l'utilisateur A (ou B) clique sur une croix ou appuie sur Echap cela détruit le salon, la room. (Cette fonction n'a pas encore été créée, mais elle va l'être).

Il n'y aura pas d'utilisateur C en réalité, du moins pas dans ma démonstration qui est déjà assez compliqué comme ça ^^

Aurais-tu une idée comment procédé ?

Bonjour,

pour avoir une idée sur la manière de procéder, il me manque des éléments. Tu dis que le côté serveur n'est pas de ton fait. Cependant j'imagine que les développeurs de cette partie ont fourni une api côté client. Ils t'ont surement fourni un ensemble de méthode permettant d'établir une communication. Or je ne les connais pas, je n'ai aucune idée des paramètres à fournir, l'interface utilisateur que tu vas faire va s'appuyer sur ces méthodes... à l'aveugle c'est difficile de t'aider..

cordialement

Antho

Plop, Les développeurs ont donné une page web, attends ça va être plus simple je vais te la linker en totalité ici. [code]

<meta charset="utf-8"><title>Mixgum · Boilerplate</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="Start your mixgum enabled app today!"><meta name="author" content="invities"><meta content="Start your mixgum enabled app today!" property="og:description"><meta content="mixgum #mixgum boilerplate" name="keywords"><meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" name="viewport"><meta content="Mixgum · Boilerplate" property="og:title"><meta content="http://www.mixgum.com/bootstrap/boilerplate.html" property="og:url"><meta content="http://www.mixgum.com/bootstrap/img/og.jpg" property="og:image"><!-- HTML5 shim, for IE6-8 support of HTML5 elements --><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]--><!-- Fav and touch icons --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="./ico/apple-touch-icon-144-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="114x114" href="./ico/apple-touch-icon-114-precomposed.png"><link rel="apple-touch-icon-precomposed" sizes="72x72" href="./ico/apple-touch-icon-72-precomposed.png"><link rel="apple-touch-icon-precomposed" href="./ico/apple-touch-icon-57-precomposed.png"><link rel="shortcut icon" href="./ico/favicon.png"><meta content="#161616" name="msapplication-TileColor"><meta content=".ico/favicon.png" name="msapplication-TileImage"><!-- Le styles --><link href="http://www.mixgum.com/bootstrap/css/bootstrap.css" rel="stylesheet"><script src="http://www.gstatic.com/external_hosted/modernizr/modernizr.js"></script><style type="text/css">
body {
padding-bottom: 40px;
background-color: transparent;
padding-top: 0px;
}

body,#scene,.scene {
height: 100%;
}
</style><link href="http://www.mixgum.com/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
Facebook info...

Twitter info...

(select a room below)

<input type="text" id="roomData"><input type="submit" id="postToRoom" value="Post">

Rooms
<input type="text" id="roomName"><input type="submit" id="createRoom" value="Create room">
Friends
<!-- Le javascript
================================================== --><!-- Placed at the end of the document so the pages load faster --><script src="http://www.mixgum.com/js/checkhttploaded.js"></script><script src="http://www.mixgum.com/bootstrap/js/jquery.js"></script><script src="http://www.mixgum.com/js/bootstrap.min.js"></script><script src="http://www.mixgum.com/js/alljs.min.js"></script><script>
var friendsArray = new Array();
window.onFacebookStatus = function(p_message) {
if(p_message.content.split('redirect').length==1)
{
$("#facebook").html('Compte facebook de '+p_message.content.split('title="')[1].split('"')[0]);
// On récupère la liste des amis
$mx.FillerLib.fillWith('#friends','facebook/friends','');
}
else
{
$("#facebook").html('<a href="'+p_message.content.split('url="')[1].split('"')[0]+'">Cliquez pour relier votre compte facebook</a>');
}
};
window.onTwitterStatus = function(p_message) {
if(p_message.content.split('redirect').length==1)
{
$("#twitter").html('Compte twitter ok');
}
else
{
$("#twitter").html('<a href="'+p_message.content.split('url="')[1].split('"')[0]+'">Cliquez pour relier votre compte twitter</a>');
}
};
var curRoom = null;
window.joinRoom = function(p_path) {
if(curRoom != null)
{
$mx.sendMessage($mx.Message('j', _UNSUB, curRoom, _ALL,_BK),{context:this,fun:'onRoomData'});
}
curRoom = p_path;
$mx.sendMessage($mx.Message('j', _SUB, curRoom, _ALL,_BK),{context:this,fun:'onRoomData'});

        $("#roomInput").show();
    }
    window.onRoomData = function(p_message) {
        var data = p_message.content.split('<content'),
        out = curRoom+'<br/>';
        for(var i=1,j=data.length;i<j;++i)
        {
            out += '<div>'+data*.split('title="')[1].split('"')[0]+'</div>';
        }
        $("#room").html(out);
    }
    window.onRooms = function(p_message) {
        var rooms = p_message.content.split('<content'),
        out = 'Rooms<br/>';
        for(var i=1,j=rooms.length;i<j;++i)
        {
            out += '<div><a href="javascript:window.joinRoom(\''+rooms*.split('path="')[1].split('"')[0]+'\')">'+rooms*.split('title="')[1].split('"')[0]+'</a></div>';
        }
        $("#rooms").html(out);
    };
    window.onroomcreated = function(p_message) {
        $("#createRoom").attr("value","Create room");
        $mx._sendMessage($mx.Message('c_', _UNSUB, 'chat_room/create_room', _ALL,''),{context:this,fun:'onroomcreated'});
    };
    window.ondataposted = function(p_message) {
        $("#postToRoom").attr("value","Post");
        $mx._sendMessage($mx.Message('p_', _UNSUB, 'chat_room/post_to_room/facebook/'+curRoom.split('my_rooms/')[1], _ALL,''),{context:this,fun:'ondataposted'});
    };
    var $mx;
    window.onReady = function(p_id, p_mail, p_device, p_deviceId,p_devicePhoto, p_avatar) {
        $mx = window.mixgum;
        $mx._sendMessage($mx.Message('f_', _SUB, 'facebook/status', _ALL,_BK),{context:this,fun:'onFacebookStatus'});
        $mx._sendMessage($mx.Message('t_', _SUB, 'twitter/status', _ALL,_BK),{context:this,fun:'onTwitterStatus'});
        $mx._sendMessage($mx.Message('r_', _SUB, 'facebook/my_rooms', _ALL,_BK),{context:this,fun:'onRooms'});

        $("#roomInput").hide();
        $("#postToRoom").click(function(event) {
            $("#postToRoom").attr("value","Posting...");
            event.preventDefault();
            $mx._sendMessage($mx.Message('p_', _SUB, 'chat_room/post_to_room/facebook/'+curRoom.split('my_rooms/')[1], _ALL,'<content title="'+$("#roomData").val()+'"/>'),{context:window,fun:'ondataposted'});
        })

        $("#createRoom").click(function(event) {
            $("#createRoom").attr("value","Creating...");
            event.preventDefault();
            $mx._sendMessage($mx.Message('c_', _SUB, 'chat_room/create_room', _ALL,'<content name="'+$("#roomName").val()+'" type="facebook"/>'),{context:window,fun:'onroomcreated'});
        })
    };
</script>[/code] Et voilà c'est tout... -\_- Au niveau de leurs doc c'est "Regardez la page d'exemple, donc ce que je viens de linker"...
Au niveau de leurs doc c'est "Regardez la page d'exemple, donc ce que je viens de linker"...

Je vais essayer de comprendre un peu cette page mais ça ce n'est pas très sérieux... Je ne sais pas si tu es dans un secteur professionnel mais si c'est le cas un plan de charge a du être établi, en absence de doc, tu vas consommer du temps à comprendre quelque chose qui doit être un pré requis à ton travail.. personnellement je les relancerai pour obtenir une documentation claire après je ne connais pas le contexte...

EDIT:

Il n'y a aucun commentaire sur les méthodes... sympa pour la maintenance...

Ah mais j'arrête pas de leurs dire...Le domaine actuel est celui d'un concours, mais effectivement je pars un temps énorme à comprendre quelque chose, car en plus le Javascript j'ai jamais eu l'occasion de m'y intéresser, et je développe uniquement depuis 1an donc je lutte un peu -_-

En plus, ils n'ont pas pensé à toutes les fonctionnalités (exemple : Si personne ne leur demande, la notion de déconnexion n'était pas implémentée, etc, etc...)

Bonjour , à défaut de spécs précises , peux-t-on avoir une page pour tester ?
J'ai un peu de mal à visualiser le fonctionnement ..

cordialement

Antho

Salut Antho, oui la page de test est ci-dessus, tu copies colle le code, et hop tu as la page ^^

Bonsoir, on peut avoir un compte test?
Là il faut s'inscrire...