我在此处包括了server.js和index.html代码，但我不确定在聊天应用程序中在何处添加multer和显示图像。聊天应用程序工作正常，但我想添加更多功能，例如添加图像并将其显示在我的聊天应用程序上，而不是向其他用户发送消息。我是node.js的新手，我一直在研究教程，以了解有关node.js代码的更多信息。
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server);
usernames =[];
server.listen(process.env.PORT || 3000);
console.log('Server Running...');
app.get('/',function(req, res){ //request and respond
res.sendFile(__dirname + '/index.html');
});
//Connection
io.sockets.on('connection', function(socket){
console.log('Socket Connected');
socket.on('new user', function(data, callback){
if(usernames.indexOf(data) != -1){//array that hold all the username
callback(false);
} else {
callback(true);
socket.username = data;
usernames.push(socket.username);//username's array
updateUsernames(); // new function
}
});
//Update Usernames
function updateUsernames(){
io.sockets.emit('usernames', usernames)//emit an event, emit usernames and pass along usernames
}
//Send Message
socket.on('send message', function(data){
io.sockets.emit('new message', {msg: data, user:socket.username});
});
//Disconnect
socket.on('disconnect', function(data){
if(!socket.userrname){
return;
}
usernames.splice(username.indexOf(socket.username), 1);//take username out of username array
updateUsernames();
});
});
这是index.html：
<!DOCTYPE html>
<html>
<head>
<title>Chat Platform</title>
<style>
body{
background: #f9f9f9;
}
#container{
width:700px;
margin:0 auto;
}
#chatWindow{
height:300px;
}
#mainWrapper{
display:none;
}
#chatWrapper{
float:left;
border:1px #ccc solid;
border-radius: 10px;
background:#f4f4f4;
padding:10px;
}
#userWrapper{
float:left;
border:1px #ccc solid;
border-radius: 10px;
background:#f4f4f4;
padding:10px;
margin-left:20px;
width:150px;
max-height:200px;
}
#namesWrapper{
float:left;
border:1px #ccc solid;
border-radius: 10px;
background:#f4f4f4;
padding:10px;
margin-left:20px;
}
input{
height:30px;
}
</style>
</head>
<body>
<div id="container">
<div id="namesWrapper"> <!--username form goes-->
<h2>Chat Platform</h2>
<p>Create Username:</p>
<div id="error"></div>
<form id="usernameForm">
<input type="text" size="40" id="username">
<input type="submit" value="Submit">
</form>
</div>
<div id="mainWrapper">
<h2>Chat Platform</h2>
<div id="chatWrapper">
<div id="chatWindow"></div>
<form id="messageForm">
<input type="text" size="40" id="message" placeholder="Say something">
<input type="submit" value="Submit">
</form>
</div>
<div id="userWrapper"> <!--username will be listed here-->
<div id="users"></div>
</div>
</div>
</div>
<script src= "http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function(){
var socket = io.connect();//socket connection
var $messageForm = $('#messageForm');//usejquery to catch the input, $ sign to reference variable in jquery
var $message = $('#message');
var $chat = $('#chatWindow');
var $usernameForm = $('#usernameForm');
var $users = $('#users');
var $username = $('#username');
var $error = $('#error'); // to able to show errors
$usernameForm.submit(function(e){
e.preventDefault(); //get the message form and set a function to parse an event, to prevent the form from actually submitting
//console.log('Submitted');
socket.emit('new user', $username.val(), function(
data){
if (data){
$('#namesWrapper').hide();
$('#mainWrapper').show();
}else{
$error.html('Username is taken');
}
}); //emit the sent message event and the new message to client
//$message.val(''); //clear the form message and parsing the empty quotes
//console.log('Submitted'); to check whether the message is submitted in the console
});
socket.on('usernames', function(data){
var html = ''; //initialize variable called html with empty string
for(i = 0;i < data.length;i++){ //loop thru the username, increment by 1
html += data[i] + '<br>'; //every username and concetanate line break, append using +=
}
$users.html(html); //parsing the html variable
});
$messageForm.submit(function(e){
e.preventDefault(); //get the message form and set a function to parse an event, to prevent the form from actually submitting
socket.emit('send message', $message.val()); //emit the sent message event and the new message to client
$message.val(''); //clear the form message and parsing the empty quotes
//console.log('Submitted'); to check whether the message is submitted in the console
});
socket.on ('new message', function(data){
$chat.append('<strong>' +data.user+ '</strong>' + ': ' +data.msg+'<br>'); //append
});// add new message to sent to the server and sent back with new message along with new data.
});
</script>
</body>
</html>