Sockett.IOとnodeJsでインスタントメッセージのプッシュを実現します.

12892 ワード


早くからWebSocketでインスタントメッセージのプッシュ機能を完成したいです.以前はWebSocket+C〓で実現しようとしましたが、結局人は年を取って馬鹿になりました.一日も治らなかったです.今はいくつかの資料を参考にして、やっと一つのSocket.IOとnodeJsを結合したDemoが完成しました.Sockete.IOを使うと、開発者がブラウザの違いを気にする必要がないという大きなメリットがあります.ChromeはWebSocketを使いますが、使うIEならポーリングします.nodeJsの環境構築などの知識はここでは取り上げません.とりあえず入門の文章を提供します.  Node入門 , Sockett.IOの公式サイト
もう一つ勧めます.いい外国語です.Commet and Sockett.io deployment.
バックグラウンドコードserver.js
var fs = require('fs'),

    http = require('http'),

    sio = require('socket.io');



var server = http.createServer(function(req, res) {

    res.writeHead(200, { 'Content-type': 'text/html' });

    res.end(fs.readFileSync('./index.htm'));

});

server.listen(8888, function() {

    console.log('Server listening at http://localhost:8888/');

});

// Attach the socket.io server

io = sio.listen(server);

// store messages

var messages = [];

// Define a message handler

io.sockets.on('connection', function(socket) {

    socket.on('message', function(msg) {

        console.log('Received: ', msg);

        messages.push(msg);

        socket.broadcast.emit('message', msg);

    });

    // send messages to new clients

    messages.forEach(function(msg) {

        socket.send(msg);

    })

});
フロントコードindex.httm
<html>

<head>

  <style type="text/css">

    #messages { padding: 0px; list-style-type: none;}

    #messages li { padding: 2px 0px; border-bottom: 1px solid #ccc; }

  </style>

  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

  <script src="/socket.io/socket.io.js"></script>

  <script>

      $(function() {

          var socket = io.connect();

          socket.on('connect', function() {

              socket.on('message', function(message) {

                  $('#messages').append($('<li></li>').text(message));

              });

              socket.on('disconnect', function() {

                  $('#messages').append('<li>Disconnected</li>');

              });

          });



          var el = $('#chatmsg');

          $('#chatmsg').keypress(function(e) {

              if (e.which == 13) {

                  e.preventDefault();

                  socket.send(el.val());

                  $('#messages').append($('<li></li>').text(el.val()));

                  el.val('');

              }

          });

      });

  </script>

</head>

<body>

 <ul id="messages"></ul>

 <hr>

 <input type="text" id="chatmsg">

</body>

</html>
運転方法
  • コマンドラインにnode server.jsを入力してサーバ
  • を開く.
  • は2つのページを開けて、それぞれ住所を入力します.http://localhost:8888/
  • 注意点:index.httmでファイル「/sockete.io/sockete.io.js」を引用しました.これはバックグラウンドのSocket.IOモジュールによって自動的に提供されます.私達はそれを管理する必要がありません.
    Sockete.IO公式サイトからの例では、ここの点を説明していませんでしたが、一日じゅう混乱していました.上の外国語を見てから分かりました.
    このモモちゃんはチャットルームとは言えません.インスタントメッセージを送っただけです.これからは時間があります.もっと完璧にしましょう.