NodeJS + Socket.io Chat應用程序每次發送新消息時都會產生新的連接

我正在使用socket.io開發實時聊天室。按下「發送」按鈕後，頁面將重新加載並建立新的連接。我知道我錯過了JavaScript代碼的位置。NodeJS + Socket.io Chat應用程序每次發送新消息時都會產生新的連接

我跟着本教程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>

來源

2017-09-15 aditya tyagi

看起來像您的表單提交。我認爲你不需要爲這種情況使用表格。試着移除你的表單標籤，當點擊'id =「send-btn」'時，調用'submitFunction（）'我會把它重命名爲'sendMessage（）'或者更好的東西。您的表單可能由於錯誤返回而提交;' –

如果您不明白您的代碼，請考慮設置斷點並逐個執行您的代碼。 –

它正在一個新的連接的原因每次都是因爲每次提交表單時，你的頁面都很新鮮，所以每次刷新時都會打電話給var socket = io();因此建立與服務器的新連接。考慮在每次發送表單時執行AJAX請求，或者覆蓋表單的默認刷新行爲。

來源

2017-09-15 19:19:52

NodeJS + Socket.io Chat應用程序每次發送新消息時都會產生新的連接

回答

相關問題