socket.ioが作ったグループチャットのdome

6278 ワード

入門:チャットアプリケーション
このガイドでは、基本的なチャットアプリケーションを作成します.必要なものだjsとSocket.IOは基本的な先行知識がほとんどないので、すべての知識レベルに適したユーザーです.
紹介する
ポピュラーなWebアプリケーションとのチャットアプリケーションスタック様LAMP(PHP)を書くことは伝統的に努力されてきた.サーバの変更を投票したり、タイムスタンプを追跡したりすることに関連しています.
ソケットは、従来、その最もリアルタイムのチャットシステムアーキテクチャをめぐって、クライアントとサーバとの間の双方向通信チャネルの解を提供してきた.
これは、サーバがメッセージクライアントをプッシュできることを意味します.チャットメッセージを書くと、サーバはそれを得て、他のすべての接続クライアントにプッシュします.
Webフレームワーク
最初の目標は、簡単なHTMLページを設定し、テーブルとメッセージのリストを提供することです.Nodeを使用します.jsのWebフレームワークexpressはこれで終了する.確認してjsのインストール.
まず、package.jsonを作成して、私たちのプロジェクトリストファイルを説明します.専用の空きディレクトリに置くことをお勧めします(chat-exampleに電話します).
{
  "name": "socket-chat-example",
  "version": "0.0.1",
  "description": "my first socket.io app",
  "dependencies": {}
}

現在、dependenciesと私たちが必要とするものを簡単に充填するために、npm install --saveを使用します.
npm install --save [email protected]

今すぐ宅配便でインストールして、index.jsファイルを作成することができます.このファイルは私たちのアプリケーションを設定します.
var app = require('express')();
var http = require('http').Server(app);

app.get('/', function(req, res){
  res.send('

Hello world

'); }); http.listen(3000, function(){ console.log('listening on *:3000'); });

次のように変換されます.
高速初期化appは、線2に示すようにHTTPサーバの関数処理を提供することができる.
ルーティングプロセッサ/を定義すると、Webサイトのトップページに電話して呼び出されます.
httpサーバ3000ポートの傍受をします. node index.jsを実行すると、次の内容が表示されます.
ブラウザがhttp://localhost:3000を指している場合:
サービスHTML
これまで、index.jsres.sendを呼び出し、HTML文字列を渡してきました.アプリケーション全体のHTMLに私たちのコードがあるだけでは混乱します.逆に、index.htmlファイルを作成し、サービスします.
ルーティング・ハンドラを再構築し、sendFileを使用します.
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

およびパディングindex.htmlには、次の内容があります.


  
    Socket.IO chat
    
  
  
    

如果您重新启动该进程(通过按Ctrl + C组合并运行node index一次),并刷新页面就应该是这样的:

整合Socket.IO

Socket.IO是由两部分组成:

  • 与集成(或坐骑)Node.js的HTTP服务器服务器: socket.io
  • 加载在浏览器端的客户端库: socket.io-client

在开发过程中,socket.io自动服务于客户对我们来说,因为我们将看到,所以现在我们只需要安装一个模块:

npm install --save socket.io

これにより、モジュールがインストールされ、依存関係package.jsonが追加される.では、index.jsを編集して追加します.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

なお、私が初期化した新しいインスタンスsocket.ioは、http(HTTPサーバ)オブジェクトを通過させることによって行われる.その後、connectionからソケットイベントが届き、コンソールにログインしました.
今、私のindexで.htmlの前に、次のコードフラグメントを追加します.