Здравсвтуйте, недавно загорелся желанием написать чат. Вроде как всё получалось, но как решил добавить ники, то всё пошло как-то не очень...
Сейчас, после ввода ника ничего не происходит, страница почему-то просто релоудится, хотя должна показать само окно чата.
Вот исходники:
Index.html
<body>
<div class="setNickname-wrap">
<form class="nick-form">
<input type="text" class="nickname">
<!-- <input type="submit" class="add" value='Enter a nickname'> -->
<input type='submit' class="add" value='Enter a nickname'>
</form>
<p class="nick-error"></p>
</div>
<div class="chat-wrap">
<ul id="messages"></ul>
<form class='send-message'>
<input type="text" id="input" autocomplete="off">
<input type='submit' class='send' value='Send'>
</form>
<div class="online-users"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io(),
sendMessage = $('.send-message'),
nickWrap = $('.setNickname-wrap'),
chatWrap = $('.chat-wrap'),
nickInput = $('.nick'),
nickForm = $('.nick-form'),
nickError = $('.nick-error'),
onlineUsers = $('online-users');
chatWrap.hide();
nickForm.submit(function(){
socket.emit('new user', nickInput.val(), function(data){
if(data){
nickWrap.hide();
chatWrap.show();
} else {
nickError.html("That username is already taken.");
}
});
// nickInput.val('');
});
socket.on('usernames', function(data){
var html = '';
for(i = 0; i < data.length; i++){
html += data[i] + '<br>';
}
onlineUsers.html(html);
});
sendMessage.submit(function(){
socket.emit('chat message', $('#input').val());
$('#input').val('');
return false;
});
socket.on('chat message', function(msg){
// $('#messages').append($('<li>').text(msg));
$('#messages').append('<li><b>' + data.nick + ': </b>' + data.msg + '</li>' + '<br>');
});
</script>
</body>
server.js
var app = require('express')()
http = require('http').Server(app),
io = require('socket.io')(http),
nicknames = [];
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('new user', function(data, callback){
if(nicknames.indexOf(data) != -1){
callback(false);
} else {
callback(true);
socket.nickname = data;
nicknames.push(socket.nickname);
updateNicknames();
}
});
function updateNicknames(){
io.emit('usernames', nicknames);
}
socket.on('send message', function(data){
io.emit('new message', {msg: data, nick: socket.nickname});
});
socket.on('disconnect', function(data){
if(!socket.nickname) return;
nicknames.splice(nicknames.indexOf(socket.nickname), 1);
updateNicknames();
});
});
http.listen(3000, function(){
console.log('listening on 127.0.0.1:3000');
});
Средний