2017-03-29 10 views
0

チャットはsocket.ioライブラリのwebsocketを使用してnodejsでプログラミングされていますが、socket.ioのWebソケットも使用するクライアントがあります。 2人は一緒に働く。何らかの理由で、クライアントはサーバーにメッセージを送信しません(メッセージを受け取ったときにコンソールに書き込む必要があるconsole.log関数がありますが、何も書き込まれません)。WebSocketを使用しているnodejの私の簡単なチャットがメッセージを送信しない理由

サーバーのコードは次のとおりです。

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
var port = process.env.PORT || 3000; 

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

io.on('connection', function(socket){ 
    socket.on('chat message', function(msg){ 
     console.log('message: ' + msg); 
    io.emit('chat message', msg); 
    }); 
}); 

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

とクライアントのためには、次のとおりです。

<!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> 



     // 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); 
     } 


     // Create a socket instance 
     socket = new WebSocket('ws://localhost:8080'); 

     // Open the socket 
     socket.onopen = function(event) { 
      console.log('Socket opened on client side',event); 

      // Listen for messages 
      socket.onmessage = function(event) { 
       console.log('Client received a message',event); 
      }; 

      // Listen for socket closes 
      socket.onclose = function(event) { 
       console.log('Client notified socket has closed',event); 
      }; 

     }; 


    </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> 

あなたがここに何が間違っている任意のアイデアを持っていますか? ありがとうございます!

+0

'socket.on(' chat message ''から 'socket.on(' message'')に変更してみてください。[docs](https://socket.io/docs/client-api/) #socket-send-args-ack): 'socket.send' _' message'イベントを送信します。サーバー内の正しいものを聞く必要があります。 – FirstOne

+0

さらに、このcdnは壊れています。古くなったチュートリアルのちょうど後に、以下を参照してください:[https://socket.io/get-started/chat/](https://socket.io/get-started/chat/) – FirstOne

+0

私は 'chat message'を'メッセージ'は同じ問題ですが、まだ同じ問題です –

答えて

0

あなたは私の知識に基づいていくつかの問題があります。それらがすべて修正されていれば、うまくいくはずです。

  1. 接続socket.io.jsファイルは、独自のものでなければなりません。あなたのケースでは、私はそれが<script src="http://localhost:3000/socket/socket.io.js"></script>と推測していますあなたのポートが異なる可能性があるので、私は100%確実ではありません。
  2. クライアント側でソケットを正しく定義していませんでした。次のように定義してください:var socket = io();。あなたがやったやり方はsocket = new WebSocket('ws://localhost:8080'); WebSocketが定義されていないところです。そして、コードはあなたのサーバーコードで既に行った新しいwebsocketサーバーを作成します。クライアント側で行う必要があるのは、サーバーに接続するだけです。
  3. クライアントとサーバーが通信できるようにするには、同じチャネルを使用する必要があります。クライアントコードでは、socket.emit('chat message', 'content you want to send'のようなメッセージを送信する必要があります。
  4. 私はあなたがなぜサーバー側でメッセージをもう一度出すのかわかりません。私はあなたがクライアントからサーバーにメッセージを送信していると仮定しています。だからあなたはサーバーコードでemitコマンドを実行すべきではありません。

4つの事柄がすべて修正されていれば動作します。

場合、私の表現が明確ではないが、私はあなたのための超簡単な例を書いた:

サーバー側:

let io = socketio(server.listener); 
io.on("connection", function(socket) { 
    console.log("A user connected"); 

    // auto messages when a user is connected 
    setTimeout(function() { 
     socket.send("message at 4 seconds"); 
    }, 4000); 
    setTimeout(function() { 
     socket.send("message at 8 seconds"); 
    }, 8000); 

    // callback when a user disconnected 
    socket.on("disconnect", function(){ 
     console.log("A user disconnected"); 
    }); 

    // receive message from client 
    socket.on("client-server", function(msg) { 
     console.log(msg); 
    }); 
}); 

// you put this code anywhere when you need to send message from server to client 
io.emit("server-client", "server to client message"); 

クライアント側:

<!DOCTYPE html> 
<html> 
    <head><title>Hello world</title></head> 
    <script src="http://localhost:3000/socket.io/socket.io.js"></script> 
    <script> 
    var socket = io(); 
    socket.on('server-client', function(data) {document.write(data)}); 
    socket.emit('client-server', 'test message'); 
    </script> 
    <body>Hello world</body> 
</html> 

私のサーバー・コードが書かれていますtypecriptで、キーワード、二重引用符などを覚えてはいけません。

関連する問題