基本聊天应用程序无法正常工作。尝试使用套接字io 实现基本聊天应用程序。发送消息后，用户断开连接并再次连接，这会导致删除以前发送或接收的消息。下面是js和html中用到的函数。
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/',function(req,res){
res.sendFile(__dirname + '/chat_home.html');
});
io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
//console.log('chat started');
socket.on('chat message',function(msg){
//io.emit('some event', { for: 'everyone' });
console.log('message: ' + msg);
io.emit('chat message', msg, { for: 'everyone' });
});
});
//io.on('connection', function(socket){
//});
http.listen(3000, function(){
console.log('listening on *:3000');
});
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
function sendMessage() {
var msg = document.getElementById('m');
socket.emit('chat message', msg.value);
msg.value = '';
var ul = document.getElementById("msg.value");
var li = document.createElement("li");
li.appendChild(document.createTextNode(msg));
ul.appendChild(li);
//return false;
}
socket.on('chat message', function (msg) {
var ul = document.getElementById("messages");
var li = document.createElement("li");
li.appendChild(document.createTextNode(msg));
ul.appendChild(li);
localStorage.msgs=ul.innerHTML;
});
</script>
</head>
<body>
<ul id="messages"></ul>
<form action="" onsubmit="javascript:sendMessage();">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
</body>
</html>
最佳答案
Index.js
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendfile('index.html');
});
/*io.on('connection', function(socket){
console.log('a user connected');
});
*/
http.listen(3000, function(){
console.log('listening on *:3000');
});
/* Socket io event to disconnect users */
io.on('connection', function(socket){
console.log('a user connected');
socket.on('disconnect', function(){
console.log('user disconnected');
});
});
/* Code for print out the chat msg */
/*
io.on('connection', function(socket){
socket.on('chat message', function(msg){
console.log('message: ' + msg);
});
});
In order to send an event to everyone, Socket.IO gives us the io.emit:
io.emit('some event', { for: 'everyone' });
If you want to send a message to everyone except for a certain socket, we have the broadcast flag:
io.on('connection', function(socket){
socket.broadcast.emit('hi');
});
In this case, for the sake of simplicity we’ll send the message to everyone, including the sender.
*/
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
Index.html
<!--If you restart the process (by hitting Control+C and running node index again) and refresh the page it should look like this: -->
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</head>
<body>
<ul id="messages"></ul>
<h2><font color="red">Aman Chat App</font></h2>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<!--<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>-->
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<!--<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
</script>-->
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>
package.json
{
"name": "aman-chat-app",
"version": "0.0.1",
"description": "my first real time chat app",
"main": "index.js",
"scripts": {
"test": "npm start"
},
"author": "aman kumar",
"license": "MIT",
"dependencies": {
"express": "^4.10.2",
"socket.io": "^1.4.6"
}
}
关于javascript - 使用socket-io制作一个基本的聊天应用程序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33023925/