套接字.IO聊天示例在表单提交后不起作用

socket.io chat example doesn't work after form submit

本文关键字：表单提交 不起作用 IO 聊天 套接字      更新时间：2023-09-26

我遵循了socket的聊天教程。io (http://socket.io/get-started/chat/)，但是一旦我来到了我必须从表格中获取信息的部分，我就卡住了。

我从index.html文件中得到的警告是:

io is not defined please fix or add global io
$ is not defined please fix or add global $

我尝试将网站链接添加到<script src="/socket.io/socket.io.js">，但这没有效果。我用c9。IO作为我的开发工具使用node.js和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){
    io.emit('chat message', msg);
  });
});
http.listen(process.env.PORT, process.env.IP, function() {
    console.log("listening on *:" + process.env.PORT);
});

index . html 

<!-- I did not include the html and head tags in this example for readability purposes -->
<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="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>
</body>

添加事件窗口就绪

var socket = io();
$(document).ready(function(){
      $('form').submit(function(){
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
});
相关文章：