2017-09-08 22 views
0

私は余裕のような単純なアプリケーションを実装したいと思います。ルーム名を入力すると、その名前の部屋が作成され、URLに名前を入力することで誰でもこの部屋に参加できます。 私は以下のコードを試しましたが、そうsocket.IOと直接それを行うにはどのような方法があり、URLとは関係がありませんと思いますか、私はそれをしなければならない手動URLを入力してユーザーが特定の部屋に入る方法を教えてください。 socket.io

server.js:

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 

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

io.on('connection', function(socket){ 
    io.on('connection', function(socket){ 
    socket.join('some room'); 
    console.log("joined rom"); 
}); 
    console.log('a user connected'); 
}); 

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

クライアント:

<script> 
     var socket = io(); 
    </script> 
+0

socket.join( 'some room');部屋を作りません。部屋名にはスペースを入れないでください。 – Ved

答えて

1

URLをリクエストすると、ブラウザに表示されるHTMLページが取得されるため、質問がちょっと奇妙です。ページを取得することによってsocket.io接続は作成されません。また、サーバーはsocket.io接続を作成しません。

http://localhost:3000/some_roomに、some_roomのsocket.io接続で終わるページを取得したい場合は、そこにアクセスするには2つの方法しかありません。

まず、Expressサーバー上でページを提供するルートが必要です。 some_roomがあなたのURLのパスが文字どおりであれば何でも構いませんが、サーバーへのすべての可能なルートが何らかの形で同じページを返さなければならないことを意味し、他の意味のあるルートを持てないことを意味するので、それは良いアイデアやデザインではないでしょう。

代わりに、あなたは簡単にこのようにそれを作ることができる:

http://localhost:3000/chat/some_room 

その後、あなたは/chatのルートを作成することができます。そのルートは適切なsocket.io接続を行うWebページを返すことができます。サーバー上で、その後

<script src="/socket.io/socket.io.js"></script> 
<script> 
    var socket = io(); 
    socket.on('connected', function() { 
     // get path from current URL 
     let room = window.location.pathname.slice(6); // remove leading /chat/ 
     let pos = room.indexOf('/'); 
     if (pos !== -1) { 
      room = room.slice(0, pos); 
     } 
     socket.emit("joinRoom", room); 
    }); 
</script> 

:これを実行する最も簡単な方法は、/chatルートは、次のコードを含むWebページを返すようにすることです

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 

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

app.get('/chat/:room', function(req, res) { 
    res.sendFile(__dirname + '/chat.html'); 
}); 

io.on('connection', function(socket){ 
    // put the client in the requested room 
    socket.on("joinRoom", function(room) { 
     // only allow certain characters in room names 
     // to prevent messing with socket.io internal rooms 
     if (!(/[^\w.]/.test(room))) { 
      socket.join(room); 
     } 
    }); 
}); 
    console.log('a user connected'); 
}); 

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

これは、クライアントが解析するアプローチを採用していますそれは自分のURLであり、URLで見つかったものに基づいて部屋への参加要求を送信します。

は、他のアプローチがあります:それは部屋に参加する別のメッセージを送信する必要がないように

  1. クライアントが初期接続上のクエリパラメータとして部屋の名前を入れることができます。これは技術的にはより洗練されていますが(起動時にはメッセージが少なくなります)、socket.io接続パラメータでクエリパラメータを送信する方法と、サーバーサイドにアクセスする方法を理解する必要があります)。
  2. サーバーはURLからルーム名を解析し、そのルーム名をページにサービスするときにクライアントのJavascriptに埋め込むことができます。クライアント側のJavascriptでURL自体を解析するよりも、なぜこれが優れているのか個人的にはわかりませんでした。
  3. サーバーは希望のルーム名のクッキーを設定でき、クライアントがsocket.ioに接続すると、サーバーはソケットに付属のクッキーからルーム名を取得できます。ioの接続要求を自動的にその部屋に追加します(これは、クライアントが上書きされる可能性があるため、部屋名が異なる可能性がある同じクライアントの複数のページが処理されている場合には問題があります)。
2

部屋を確認してください名前は単一の文字列です。それが動作します。

io.on('connection', function(socket){ 
     io.on('connection', function(socket){ 
     socket.join('some_room'); 
     console.log("joined rom"); 
    }); 
+0

これはうまく動作するためにURLを単一の文字列に変換することができますが、私はURL(localhost:3000)のように動作する方法を探しています(localhost:3000/some_room)slack.com –

+0

@shroukmansour – Ved

関連する問題