Fatal编程技术网
  • javascript/
  • Javascript 未获取socket.io客户端传递的值

Javascript 未获取socket.io客户端传递的值

javascript html node.js socket.io

Javascript 未获取socket.io客户端传递的值,javascript,html,node.js,socket.io,Javascript,Html,Node.js,Socket.io,我被困在教程的入门部分，关于发布事件。在此之前，我确实在控制台中连接了用户，并断开了用户的连接。但是，在发出部分，我没有收到控制台中socket.io客户端传递的任何消息 这是迄今为止的代码： index.js： var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function(req, res){

我被困在教程的入门部分，关于发布事件。在此之前，我确实在控制台中连接了用户，并断开了用户的连接。但是，在发出部分，我没有收到控制台中socket.io客户端传递的任何消息

这是迄今为止的代码：

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(__dirname+'/index.html');
});

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

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

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>

  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  </script>

  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>


Socket.IO聊天
*{边距：0；填充：0；框大小：边框框；}
正文{字体：13px Helvetica，Arial；}
表单{background:#000；填充：3px；位置：固定；底部：0；宽度：100%；}
表单输入{边框：0；填充：10px；宽度：90%；右边距：5%；}
窗体按钮{宽度：9%；背景：rgb（130224255）；边框：无；填充：10px；}
#消息{列表样式类型：无；边距：0；填充：0；}
#消息li{padding:5px 10px；}
#留言李：第n个孩子（奇数）{背景：#eee；}
var socket=io（）；
$（'form'）。提交（函数（）{
emit（'chat message'，$（'#m'）.val（））；
$（'m'）.val（''）；
返回false；
});

    
发送
    如果你能指导我解决这个问题，我将不胜感激。谢谢。

    您的index.js中缺少一行

    而不是：

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

    io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});
    在html文件中，当您提交聊天信息时，您将其发送回服务器，服务器需要将其发送回所有其他用户。如果没有该io.emit行，所有其他用户将无法获得该消息

    *编辑：在html文件中，它应该如下所示：

    <!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>

  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>

  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
   socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  </script>
</html>

    
Socket.IO聊天
*{边距：0；填充：0；框大小：边框框；}
正文{字体：13px Helvetica，Arial；}
表单{background:#000；填充：3px；位置：固定；底部：0；宽度：100%；}
表单输入{边框：0；填充：10px；宽度：90%；右边距：5%；}
窗体按钮{宽度：9%；背景：rgb（130224255）；边框：无；填充：10px；}
#消息{列表样式类型：无；边距：0；填充：0；}
#消息li{padding:5px 10px；}
#留言李：第n个孩子（奇数）{背景：#eee；}

      
发送
var socket=io（）；
$（'form'）。提交（函数（）{
emit（'chat message'，$（'#m'）.val（））；
$（'m'）.val（''）；
返回false；
});
socket.on（'chat message'，函数（msg）{
$（“#消息”）.append（$（“
    • ”）.text（msg））；
});
      • 它不起作用，因为您首先运行的脚本引用了一个还不存在的jQuery元素。如果您想让正文保持原样，就需要将脚本包装在$（document）.ready函数中。另外，您忘了将消息附加到传入的聊天消息套接字上

      您的index.js中缺少一行

      而不是：

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

      io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});
      在html文件中，当您提交聊天信息时，您将其发送回服务器，服务器需要将其发送回所有其他用户。如果没有该io.emit行，所有其他用户将无法获得该消息

      *编辑：在html文件中，它应该如下所示：

      <!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>

  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>

  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
   socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  </script>
</html>

      
Socket.IO聊天
*{边距：0；填充：0；框大小：边框框；}
正文{字体：13px Helvetica，Arial；}
表单{background:#000；填充：3px；位置：固定；底部：0；宽度：100%；}
表单输入{边框：0；填充：10px；宽度：90%；右边距：5%；}
窗体按钮{宽度：9%；背景：rgb（130224255）；边框：无；填充：10px；}
#消息{列表样式类型：无；边距：0；填充：0；}
#消息li{padding:5px 10px；}
#留言李：第n个孩子（奇数）{背景：#eee；}

        
发送
var socket=io（）；
$（'form'）。提交（函数（）{
emit（'chat message'，$（'#m'）.val（））；
$（'m'）.val（''）；
返回false；
});
socket.on（'chat message'，函数（msg）{
$（“#消息”）.append（$（“
      • ”）.text（msg））；
});
        • 它不起作用，因为您首先运行的脚本引用了一个还不存在的jQuery元素。如果您想让正文保持原样，就需要将脚本包装在$（document）.ready函数中。另外，您忘了将消息附加到传入的聊天消息套接字上

        您的index.js中缺少一行

        而不是：

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

        io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});
        在html文件中，当您提交聊天信息时，您将其发送回服务器，服务器需要将其发送回所有其他用户。如果没有该io.emit行，所有其他用户将无法获得该消息

        *编辑：在html文件中，它应该如下所示：

        <!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>

  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>

  <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
  <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
  <script>
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
   socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  </script>
</html>

        
Socket.IO聊天
*{边距：0；填充：0；框大小：边框框；}
正文{字体：13px Helvetica，Arial；}
表单{background:#000；填充：3px；位置：固定；底部：0；宽度：100%；}
表单输入{边框：0；填充：10px；宽度：90%；右边距：5%；}
窗体按钮{宽度：9%；背景：rgb（130224255）；边框：无；填充：10px；}
#消息{列表样式类型：无；边距：0；填充：0；}
#消息li{padding:5px 10px；}
#留言李：第n个孩子（奇数）{背景：#eee；}

          
发送
var socket=io（）；
$（'form'）。提交（函数（）{
emit（'chat message'，$（'#m'）.val（））；
$（'m'）.val（''）；
返回false；
});
socket.on（'chat message'，函数（msg）{
$（“#消息”）.append（$（“
        • ”）.text（msg））；
});
          • 它不起作用，因为您首先运行的脚本引用了一个还不存在的jQuery元素。我