Socket.emit没有通过

时间:2017-09-05 20:32:03

标签: javascript node.js express socket.io

index.js

var app = require('express')();
var path = require('path');
var server = require('http').Server(app);
var io = require('socket.io')(server);
var users = [];

connections = [];

server.listen(process.env.PORT || 3000);
app.use(require('express').static(path.join(__dirname)));

console.log('server running');

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

io.on('connection', function (socket) {
    var addedUser = false;
    socket.on('new post', function(post){
        console.log(post);
        socket.emit('posted', data);
    }); 
});

client.js

$(function(){

    function submit(){
        socket.emit('new post', $("#text").val());
        console.log("submitted");   
    }

    function addPost(data){
        console.log(2);
        var $post = $('<p></p>').text(data);
        console.log($post);
        $("#posts").append($post);  
    }

    $("#submit").on("click", function(){
        submit();
    });

    socket.on('posted', function(data){
        console.log(1);
        addPost(data);  
    });
});

的index.html

<html>
    <head>
        <title>title</title>
        <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>

    <body>
    <input type="text" id="text">Input</input>
    <button id="submit">Submit</button>


    <script src="client.js"></script>

    <br>
    <br>
    <br>

    <div id="posts"></div>
    <script>
        var socket = io();
    </script>
    </body>

</html>

当我启动服务器时,控制台记录&#34;服务器正在运行&#34;精细。我无法通过提交帖子按钮执行任何操作。没有调试控制台消息出现,也没有任何反应。它应该发出新的帖子&#34;单击提交按钮但看起来好像什么都没有通过

1 个答案:

答案 0 :(得分:0)

我能够让你的代码在我自己的计算机上运行,​​如下所示:

index.js

var express = require('express');
var app = express();

var path = require('path');
var server = require('http').Server(app);
var io = require('socket.io')(server);
var users = [];

connections = [];

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

app.use(express.static(__dirname));

console.log('server running');


io.on('connection', function (socket) {
    console.log("connection");
    socket.on('new post', function(post){
        console.log(post);
        socket.emit('posted', post);
    }); 
});

server.listen(process.env.PORT || 3000);

client.js

$(function(){

    function submit(){
        socket.emit('new post', $("#text").val());
        console.log("submitted");   
    }

    function addPost(data){
        console.log(2);
        var $post = $('<p></p>').text(data);
        console.log($post);
        $("#posts").append($post);  
    }

    $("#submit").on("click", function(){
        submit();
    });

    socket.on('posted', function(data){
        console.log(1);
        addPost(data);  
    });
});

的index.html

<html>
    <head>
        <title>title</title>
        <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>

    <body>
    <input type="text" id="text">Input</input>
    <button id="submit">Submit</button>


    <script src="/client.js"></script>

    <br>
    <br>
    <br>

    <div id="posts"></div>
    <script>
        var socket = io();
    </script>
    </body>

</html>

对index.js的更改

  1. 定义express变量,以便可以重复使用。
  2. app.get()之前定义app.use(express.static(...)),因此我们确保使用app.get()提供index.html,而不是静态位置。
  3. res.sendfile()更改为res.sendFile()`
  4. socket.emit("posted", data)更改为socket.emit("posted", post)
  5. 在设置完所有内容后,将server.listen()移至结束。
  6. path.join()电话中移除express.static(),因为那里不需要。{/ li>
  7. 在路径构建中添加path.join()res.sendFile()要求跨平台安全。
  8. 其中,唯一一个我确定导致错误的是#4,其他人都是很好的管家。

    对client.js的更改

    对index.html的更改

    将client.js的路径更改为/client.js

    如果此代码在heroku上不起作用,那么您要么没有在正确的目录中放置文件,要么没有正确配置heroku以允许您的app或socket.io正常工作。如果我是你,我会先验证这段代码是否可以在你自己的本地计算机上运行,​​然后在heroku上尝试先消除变量。