Socket.emitが

index.jsを介さないSocket.emitが

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>

サーバー、t彼はコンソールのログ "サーバーの実行"をうまくコンソール。私は何かをする投稿ポストボタンを得ることができません。デバッグコンソールのメッセージは表示されず、何も起こりません。送信ボタンをクリックしたときに「新しいポスト」を発することになったが、何も

出典

2017-09-05 Christopher Schrader

あなたのサーバーで実行しているsocket.ioのバージョンは何ですか？あなたはサーバー上で 'connection'イベントを取得していますか？クライアントを設定するためにclient.jsのコードが呼び出されていますか？ – jfriend00

4.1.2、接続イベントが発生しました。 io.on（ 'connection'）の後にコンソールログを置いて実行します。あなたの3番目の質問のために、送信ボタンが何かをしたらどういう意味ですか？もしそうなら、そうする。関数submit（）が実行され、クライアントコンソールに "submitted"が記録されます –

4.1.2がsocket.ioバージョンだとは思わないので、そのことは分かりません。 socket.io 2.0が最近リリースされました。私はあなたがクライアントとサーバー上で一致するsocket.ioバージョンを持っているかどうかを判断しようとしています。メッセージが機能しない理由があります。 ''をこの ''バージョンが一致しない場合に備えて、サーバから一致するsocket.ioクライアントバージョンをロードします。 – jfriend00

私はこのように自分のコンピュータ上で動作するようにコードを取得することができたを通過していないかのように見えます：

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>

の

変更は、それが再利用できるように

がexpress変数を定義index.jsします。
app.get()をapp.use(express.static(...))よりも前に定義すると、静的な場所ではなくapp.get()のindex.htmlを使用してください。
res.sendFileに変更res.sendfile()（） `
変更socket.emit("posted", data)socket.emit("posted", post)へ。
その他の設定が完了したら、server.listen()を終了してください。
path.join()を電話番号express.static()から削除する必要はありません。
path.join()〜res.sendFile()を追加すると、経路ビルディングでのクロスプラットフォームの安全性が求められます。

これらのうち、唯一のものはエラーを引き起こしていたと確信しています＃4、他のものは良いハウスキーピングです。

変更は/client.jsにclient.jsに

変更パスをindex.htmlをする

なし

変更をclient.jsします。

このコードは、Herokuの上で動作しない場合は、その後のいずれかのファイルが右のディレクトリに配置またはHerokuのは、あなたのアプリやsocket.ioが正しく機能するように適切に設定されていない持っていません。私があなたの場合は、まず自分のローカルコンピュータでこのコードが動作していることを確認してから、まずは変数を取り除くために英雄で試してみてください。

出典

2017-09-05 23:04:39 jfriend00

答えて

関連する問題