1

私は Windows で実行しており、localhost サーバーに WAMP を使用しています。チュートリアルをたくさん検索したり、多くのことを試したりしましたが、まだ何も機能しません..

現在のセットアップ

ここで、 www/ ディレクトリに というフォルダを作成しましたsocketiodemo

その中で、npm install socket.io他のいくつかのノードパッケージをインストールするだけでなく、次のことも行いました。

  • socket.io
  • 特急
  • ニブ
  • スタイラス

実際には必要ありませんが、上記のパッケージをすべてインストールしました。多くのチュートリアルでそれらが必要だったので、それらをインストールしましたが、それらを使用せずに、javascript を使用して純粋な socket.io にアクセスしたいと思います。

したがって、これが www の下の私のディレクトリのスナップショットです。

  • app.js
  • index.html
  • node_modules
    • socket.io
    • 特急
    • ニブ
    • スタイラス

私が見つけた最も簡素化されたチュートリアルの 1 つは、サーバー側であるこの app.js コードを提供してくれました。

// Require HTTP module (to start server) and Socket.IO
var http = require('http'), io = require('socket.io');

// Start the server at port 8080
var server = http.createServer(function(req, res){ 

    // Send HTML headers and message
    res.writeHead(200,{ 'Content-Type': 'text/html' }); 
    res.end('<h1>Hello Socket Lover!</h1>');
});
server.listen(8080);

// Create a Socket.IO instance, passing it our server
var socket = io.listen(server);

// Add a connect listener
socket.sockets.on('connection', function(client){ 

    // Create periodical which ends a message to the client every 5 seconds
    var interval = setInterval(function() {
        client.send('This is a message from the server!  ' + new Date().getTime());
    },5000);

    // Success!  Now listen to messages to be received
    client.on('message',function(event){ 
        console.log('Received message from client!',event);
    });
    client.on('disconnect',function(){
        clearInterval(interval);
        console.log('Server has disconnected');
    });

});

そして、クライアント コードの次の index.html:

<!DOCTYPE html>
<html>
<head>
    <style>
        * { margin:0; padding:0; font-size:11px; font-family:arial; color:#444; }
        body { padding:20px; }
        #message-list { list-style-type:none; width:300px; height:300px; overflow:auto; border:1px solid #999; padding:20px; }
        #message-list li { border-bottom:1px solid #ccc; padding-bottom:2px; margin-bottom:5px; }
        code { font-family:courier; background:#eee; padding:2px 4px; }
    </style>
    <script src="http://cdn.socket.io/stable/socket.io.js"></script>
    <script>

        // Create SocketIO instance
        var socket = new io.Socket('localhost',{
            port: 8080
        });
        socket.connect(); 

        // Add a connect listener
        socket.on('connect',function() {
            log('<span style="color:green;">Client has connected to the server!</span>');
        });
        // Add a connect listener
        socket.on('message',function(data) {
            log('Received a message from the server:  ' + data);
        });
        // Add a disconnect listener
        socket.on('disconnect',function() {
            log('<span style="color:red;">The client has disconnected!</span>');
        });

        // Sends a message to the server via sockets
        function sendMessageToServer(message) {
            socket.send(message);
            log('<span style="color:#888">Sending "' + message + '" to the server!</span>');
        }

        // Outputs to console and list
        function log(message) {
            var li = document.createElement('li');
            li.innerHTML = message;
            document.getElementById('message-list').appendChild(li);
        }

    </script>
</head>
<body>

    <p>Messages will appear below (and in the console).</p><br />
    <ul id="message-list"></ul>
    <ul style="margin:20px 0 0 20px;">
        <li>Type <code>socket.disconnect()</code> to disconnect</li>
        <li>Type <code>socket.connect()</code> to reconnect</li>
        <li>Type <code>sendMessageToServer('Your Message')</code> to send a message to the server</li>
    </ul>

</body>
</html>

クライアント コードはsendMessageToServer('Your Message')、chrome のインスペクターを動的に呼び出すことによって機能するように設計されています。


電流出力

それでは、サーバーを実行する時間です。WAMP はオンラインで、www/socketiodemo にアクセスして実行しています

node app.js

出力が得られます:

info - socket.io started

ここで、localhost/socketiodemo に移動すると、次のログが繰り返し表示されます。

XMLHttpRequest cannot load http://localhost:8080/socket.io/xhr-polling//1338578840544. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

XMLHttpRequest cannot load http://localhost:8080/socket.io/xhr-polling//1338578850545. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

そして、サーバー (ノード app.js) が次のメッセージの表示を開始します。

  info  - socket.io started
  warn  - unknown transport: "undefined"
  info  - unhandled socket.io url
  warn  - unknown transport: "undefined"
  info  - unhandled socket.io url
  warn  - unknown transport: "undefined"

また、クライアントでは、sendMessageToServer('Hello');単に ul: に追加され ますSending "hello" to the server!が、実際にはサーバーには何もしません。infoサーバーは、上記の と を継続的にダンプしますwarn。クライアントはまた、XMLHttpRequest上記のエラーを断続的に実行しています。

どこに問題があるか特定できますか?私は実際に非常に多くのチュートリアルやものを試しましたが、これは何かを機能させるのに最も近いものです.

誰かがうまくいくとわかっているチュートリアルを提案したい場合は、そうしてください。

4

1 に答える 1

4

Socket.IO の一部は、時間の経過とともに変更されました。さらに、おそらく HTML と Socket.IO JS を同じホスト/ポートから提供したいと思うでしょう。これを試してください:

index.html をpublicディレクトリに移動します

次のツリーがあるように:

app.js
public/
  index.html
node_modules/
  socket.io
  express
  (whatever else)

app.js を変更して HTML を提供する

app.js を次の JavaScript に変更します (最初の数行のみが変更されます)。

// Require Express module (to start server) and Socket.IO
var io = require('socket.io'), express = require('express');

var server = express.createServer();

server.use(express.static(__dirname + "/public"));

server.listen(8080);

// Create a Socket.IO instance, passing it our server
var socket = io.listen(server);

// Add a connect listener
socket.sockets.on('connection', function(client){

    // Create periodical which ends a message to the client every 5 seconds
    var interval = setInterval(function() {
        client.send('This is a message from the server!  ' + new Date().getTime());
    },5000);

    // Success!  Now listen to messages to be received
    client.on('message',function(event){
        console.log('Received message from client!',event);
    });
    client.on('disconnect',function(){
        clearInterval(interval);
        console.log('Server has disconnected');
    });

});

このコードを使用すると、index.htmllocalhost:8080 にアクセスすると、サーバーは Express を使用してサービスを提供します。

Socket.IO コードを変更する

index.html<script>タグを read:<script src="/socket.io/socket.io.js"></script>に変更してから、JavaScript を read に変更します (最初の部分のみが変更されます):

// Create SocketIO instance
var socket = io.connect();

// Add a connect listener
socket.on('connect',function() {
    log('<span style="color:green;">Client has connected to the server!</span>');
});
// Add a connect listener
socket.on('message',function(data) {
    log('Received a message from the server:  ' + data);
});
// Add a disconnect listener
socket.on('disconnect',function() {
    log('<span style="color:red;">The client has disconnected!</span>');
});

// Sends a message to the server via sockets
function sendMessageToServer(message) {
    socket.send(message);
    log('<span style="color:#888">Sending "' + message + '" to the server!</span>');
}

// Outputs to console and list
function log(message) {
    var li = document.createElement('li');
    li.innerHTML = message;
    document.getElementById('message-list').appendChild(li);
}

サーバーを起動し、localhost:8080 にアクセスします。

これにより、WAMP スタックがすべてスキップされることに注意してください。Node.js は、Socket.IO コードと静的ファイルの両方を提供しています。localhost:8080 にアクセスすると、メッセージが表示されます。socket.socket.disconnect()また、切断と再接続には を使用する必要があることにも注意してくださいsocket.socket.connect()

ソースコード

このアプリの動作バージョンのソース コードはhttps://github.com/BinaryMuse/so-10856370にあります。覚えておいてnpm install express socket.ioください!

于 2012-06-01T20:55:09.537 に答える