あなたのためだけにフランス語から英語に翻訳しました ^ ^ node.js の tchat の小さなトピック (フランス語でのコメントで申し訳ありません) http://www.atinux.fr/2011/08/28/tutoriel-socket-io-debutant/から
サーバ側
var io = require('socket.io');
次に、Node JS で HTTP サーバーを作成した後、Socket.IO がリッスンする必要があります。
io = io.listen(app);
クライアント側
ライブラリへのリンクをヘッダーに挿入する必要があります。HTML:
<script type="text/javascript" src="/socket.io/socket.io.js">
次に、サーバーへの新しい接続があります。
<script type="text/javascript">
var socket = io.connect();
</script>
イブニング
イベントを作成するには、次のようにします。
socket.on('monEvenement', maFonction);
ご覧のとおり、ソケット変数はサーバー側でまだ宣言されていません。実際、イベント「接続」のおかげで回復するはずです。
io.sockets.on('connection', function (socket) {
});
コールイブニングメント
socket.emit('monEvenement', mesDonnees);
その他の放送
socket.broadcast.emit('monEvenement', mesDonnees);
サーバー側の例
var html = require('fs').readFileSync(__dirname+'/app.html');
var app = require('http').createServer(function(req, res){ res.end(html); });
app.listen(8080);
var io = require("socket.io");
var io = io.listen(app);
io.sockets.on('connection', function (socket) {
socket.emit('faitUneAlerte');
});
クライアント側の例
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io.connect();
socket.on('faitUneAlerte', function () {
alert('Je fais une alerte car on m\'a appelé !');
});
</script>
最後に
* Tchat Html *
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tchat avec Socket.IO</title>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<style type="text/css">
body {
background-color : rgb(50,50,80);
color : white;
text-align : center;
}
#tchat {
background-color : white;
opacity : 0.8;
width : 500px;
height : 300px;
margin : auto;
border : 3px rgb(40,40,40) solid;
overflow : auto;
}
.line {
border-bottom : 1px rgb(80,80,80) solid;
padding : 4px;
text-align:left;
color : rgb(40,40,40);
}
</style>
</head>
<body>
<h1>Tchat avec Socket.IO</h1>
<div id="tchat"></div>
<form onsubmit="return (envoiMessage());">
<b>Message : </b><input type="text" name="message" id="message" style="width:250px;" /> <input type="submit" value="Envoyer" />
</form>
<script type="text/javascript">
// On demande le pseudo de l'utilisateur
var pseudo = prompt('Votre pseudo ?') || 'Utilisateur';
// On se connecte au serveur
var socket = io.connect();
// On creer l'evenement recupererMessages pour recuperer direcement les messages sur serveur
socket.on('recupererMessages', function (messages) {
// messages est le tableau contenant tous les messages qui ont ete ecris sur le serveur
var html = '';
for (var i = 0; i < messages.length; i++)
html += '<div class="line"><b>'+messages[i].pseudo+'</b> : '+messages[i].message+'</div>';
document.getElementById('tchat').innerHTML = html;
});
// Si quelqu'un a poste un message, le serveur nous envoie son message avec l'evenement recupererNouveauMessage
socket.on('recupererNouveauMessage', function (message) {
document.getElementById('tchat').innerHTML += '<div class="line"><b>'+message.pseudo+'</b> : '+message.message+'</div>';
});
// Quand on veut envoyer un message (quand il a valider le formulaire)
function envoiMessage(mess) {
// On recupere le message
var message = document.getElementById('message').value;
// On appelle l'evenement se trouvant sur le serveur pour qu'il enregistre le message et qu'il l'envoie a tous les autres clients connectes (sauf nous)
socket.emit('nouveauMessage', { 'pseudo' : pseudo, 'message' : message });
// On affiche directement notre message dans notre page
document.getElementById('tchat').innerHTML += '<div class="line"><b>'+pseudo+'</b> : '+message+'</div>';
// On vide le formulaire
document.getElementById('message').value = '';
// On retourne false pour pas que le formulaire n'actualise pas la page
return false;
}
</script>
</body>
</html>
最後に
* app.js *
var http = require('http');
var fs = require('fs');
// Creation du serveur
var app = http.createServer(function (req, res) {
// On lit notre fichier app.html
fs.readFile('./tchat.html', 'utf-8', function(error, content) {
res.writeHead(200, {'Content-Type' : 'text/html'});
res.end(content);
});
});
// Variables globales
// Ces variables resteront durant toute la vie du seveur pour et sont commune pour chaque client (node server.js)
// liste des messages de la forme { pseudo : 'Mon pseudo', message : 'Mon message' }
var messages = [];
//// SOCKET.IO ////
var io = require('socket.io');
// Socket io ecoute maintenant notre application !
io = io.listen(app);
// Quand une personne se connecte au serveur
io.sockets.on('connection', function (socket) {
// On donne la liste des messages (evenement cree du cote client)
socket.emit('recupererMessages', messages);
// Quand on recoit un nouveau message
socket.on('nouveauMessage', function (mess) {
// On l'ajout au tableau (variable globale commune a tous les clients connectes au serveur)
messages.push(mess);
// On envoie a tout les clients connectes (sauf celui qui a appelle l'evenement) le nouveau message
socket.broadcast.emit('recupererNouveauMessage', mess);
});
});
///////////////////
// Notre application ecoute sur le port 8080
app.listen(8080);
console.log('Live Chat App running at http://localhost:8080/');