0
socket.ioを使用してリアルタイムチャットルームを開発しています。 「送信」ボタンを押すと、ページがリロードされ、新しい接続が行われます。私はJavaScriptのコードの配置に欠けていることを知っている。NodeJS + Socket.io新しいメッセージが送信されるたびに新しく接続するチャットアプリ
このチュートリアルhttp://javabeginnerstutorial.com/javascript-2/create-simple-chat-application-using-node-js-express-js-socket-io/#comment-4868に従っていますが、コードを動作させることができませんでした。すべての可能なパターンを試してみました。
server.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var path = require('path');
app.set('port', (process.env.PORT || 3000));
app.get('/', function(req, res) {
var express = require('express');
app.use(express.static(path.join(__dirname)));
res.sendFile(path.join(__dirname, '../ATTEMPT-2', 'index.html'));
});
io.on('connect', function(socket) {
console.log('A new user is connected');
socket.on('chatMessage', function(from, msg) {
io.emit('chatMessage', from, msg);
});
socket.on('notifyUser', function(user) {
io.emit('notifyUser', user);
});
});
http.listen(app.get('port'), function() {
console.log('The application is running on port ' + app.get('port'));
});
chat.js
$(document).ready(function() {
var socket = io();
function submitFunction() {
var from = $('#user').val();
var message = $('#m').val();
if (message != '') {
socket.emit('chatMessage', from, message);
}
$('#m').val('');
return flase;
}
function notifyTyping() {
var user = $('#user').val();
socket.emit('notifyUser', user);
}
socket.on('chatMessage', function(from, msg) {
var me = $('#user').val();
var color = (from == me) ? 'green' : '#009afd';
var from = (from == me) ? 'Me' : from;
$('#messages').append('<li><strong style="color:' + color + '">' + from
+ '</strong>:' + msg + '</li>');
});
socket.on('notifyUser', function(user) {
var me = $('#user').val();
if (user != me) {
$('#notifyUser').text(user + 'is typing...');
}
setTimeout(function() {
$('#notifyUser').text('');
}, 10000);
});
// CREATE USERS
var name = makeId();
$('#user').val(name);
socket.emit('chatMessage', 'System', '<strong>' + name + '</strong> has
joined the conversation!');
});
function makeId() {
var text = "";
var possible =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random()*possible.length));
}
return text;
}
のindex.html - >だけ重要な部分を出し
<head>
<title>Chat App | DB</title>
<link rel="stylesheet" href="css/main.css">
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="chat.js"></script>
</head>
<body>
<div class="chat">
<input type="text" class="chat-name" placeholder="Enter your name">
<div class="chat-messages">
<ul id="messages"></ul>
<span id="notifyUser"></span>
</div>
<div id="sending-form">
<form id="form" action="" onsubmit="return submitFunction();">
<input type="hidden" id="user" value="" />
<input id="m" autocomplete="off" onkeyup="notifyTyping();"
placeholder="Type yor message here.." />
<input type="button" class="btn btn-primary" id="send-btn" value="Send">
</form>
</div>
</div>
</body>
フォームが送信されているようです。私はあなたがこの場合にフォームを使用する必要はないと思う。あなたのフォームタグを削除しようとすると、 'id =" send-btn "がクリックされたときに' submitFunction（） 'を呼び出すと、その名前を' sendMessage（） 'などに変更します。 –
コードを理解できない場合は、ブレークポイントを設定してコードを1行ずつステップ実行することを検討してください。 –