Fatal编程技术网

Socket.io提交按钮

socket.io

Socket.io提交按钮,socket.io,Socket.io,嘿，伙计们，我在他们的网站上学习socket io，我只是不明白这件事。他们在哪里说点击“发送”按钮是提交操作？我的意思是，我没有看到onclick事件或类似的事情。谢谢代码如下： <!doctype html> <html> <head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0; box-sizing:

嘿，伙计们，我在他们的网站上学习socket io，我只是不明白这件事。他们在哪里说点击“发送”按钮是提交操作？我的意思是，我没有看到onclick事件或类似的事情。谢谢代码如下：

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


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



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


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；
});
});
var app=require（'express'）（）；
var http=require（'http'）。服务器（应用程序）；
var io=require（'socket.io'）（http）；
app.get（'/'，函数（req，res）{
res.sendFile（uu dirname+'/index.html'）；
});
io.on（'连接'，函数（套接字）{
socket.on（'chat message'，函数（msg）{
console.log（'message:'+msg）；
});
});
http.listen（3000，函数（）{
console.log（'监听*：3000'）；
});
    当提交事件发生时，脚本使用Socket.IO发送数据，但不提交表单（
    返回false；
    ）。当然，您也可以使用onclick事件

    Socket.IO发送：

    socket.emit('chat message', $('#m').val());
    例如，如果您有一个id为“testButton”的按钮：

    谢谢您的回答，但当我使用此应用程序时，当我单击“发送”按钮时，“提交”功能会运行，该按钮不被称为“提交事件”。这就是为什么我不明白为什么只有当我点击send时，消息才会出现在控制台上。当表单中有一个按钮时，它会在每次点击时发出submit事件。下面是一个jquery事件处理程序，它在您单击发送按钮时向服务器发送一个聊天消息事件，这是处理程序
    $（'form'）.submit（函数（）{socket.emit（'chat message'，$（'m'）.val（）；$（'m'）.val（''）；返回false；}）非常感谢，所以表单中的按钮始终被视为提交按钮？如果您的按钮没有类型属性，所有按钮都将触发提交事件。如果希望按钮触发提交事件，则需要向按钮添加类型。这里有一个简单的例子

    $('#testButton').click(function() {
    socket.emit('chat message', $('#m').val());
});