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>
現在，如果你使用相同的使用者名稱連線兩個客戶端，它將給你一個錯誤，如下面的螢幕截圖所示 -
一旦你提供了可接受的使用者名稱，你將進入一個帶有訊息框和按鈕的螢幕以傳送訊息。現在，我們必須處理並將訊息定向到連線的客戶端。為此，修改你的 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');
});
現在將任意數量的客戶端連線到你的伺服器，為他們提供使用者名稱並開始聊天！ 在下面的示例中，我們連線了兩個名為 Ayush 和 Harshit 的客戶端，並從兩個客戶端傳送了一些訊息 -
