Socket.IO 聊天实例
Socket.IO 聊天实例
现在我们应该对Socket.IO比较熟悉了，现在让我们写一个聊天应用程序，我们允许用户自定用户名并使用它在不同的聊天室中进行聊天。
首先让我们需要html文件来请求用户名:
<!DOCTYPE html> <html> <head><title>Hello world</title></head> <script src="/socket.io/socket.io.js"></script> <script> var socket = io(); </script> <body> <input type="text" name="name" value="" placeholder="Enter your name!"> <button type="button" name="button">Let me chat!</button> </body> </html>
现在我们写好了html并允许用户自己在文本框中输入用户名，让我们创建服务器来接受来自客户端的连接。我们将允许用户使用setUsername事件发送他们的用户名。如果用户存在，我们将通过userExists事件响应，否则使用userSet事件。
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');
});
users = [];
io.on('connection', function(socket){
console.log('A user connected');
socket.on('setUsername', function(data){
if(users.indexOf(data) > -1){
users.push(data);
socket.emit('userSet', {username: data});
}
else{
socket.emit('userExists', data + ' username is taken! Try some other username.');
}
})
});
http.listen(3000, function(){
console.log('listening on localhost:3000');
});当人们输入用户名并点击按钮时，我们将用户名发送到服务器。如果用户存在，我们将显示错误消息，否则我们将显示聊天窗口:
<!DOCTYPE html>
<html>
<head><title>Hello world</title></head>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
function setUsername(){
socket.emit('setUsername', document.getElementById('name').value);
};
var user;
socket.on('userExists', function(data){
document.getElementById('error-container').innerHTML = data;
});
socket.on('userSet', function(data){
user = data.username;
document.body.innerHTML = '<input type="text" id="message">\
<button type="button" name="button" onclick="sendMessage()">Send</button>\
<div id="message-container"></div>';
});
function sendMessage(){
var msg = document.getElementById('message').value;
if(msg){
socket.emit('msg', {message: msg, user: user});
}
}
socket.on('newmsg', function(data){
if(user){
document.getElementById('message-container').innerHTML += '<div><b>' + data.user + '</b>: ' + data.message + '</div>'
}
})
</script>
<body>
<div id="error-container"></div>
<input id="name" type="text" name="name" value="" placeholder="Enter your name!">
<button type="button" name="button" onclick="setUsername()">Let me chat!</button>
</body>
</html>现在，如果您将2个客户端连接到聊天室,并使用相同的用户名，它会给您一个如下错误:
一旦用户提供了可接受的用户名，用户将显示聊天界面:这个界面包含聊天列表,输入框和发送按钮。
现在我们需要处理和将消息定向到连接的客户端。用于修改app.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');
});
users = [];
io.on('connection', function(socket){
console.log('A user connected');
socket.on('setUsername', function(data){
console.log(data);
if(users.indexOf(data) > -1){
socket.emit('userExists', data + ' username is taken! Try some other username.');
}
else{
users.push(data);
socket.emit('userSet', {username: data});
}
});
socket.on('msg', function(data){
//Send message to everyone
io.sockets.emit('newmsg', data);
})
});
http.listen(3000, function(){
console.log('listening on localhost:3000');
});现在用户连接到服务器，输入用户名就可以开始聊天了！在下面的示例中，我使用了2个名为ayush和harshit的客户端，测试发送了一些消息:
