Socket.io-chat-application
提供:Dev Guides
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('indexl');
});
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('indexl');
});
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という名前の2つのクライアントを接続し、両方のクライアントからいくつかのメッセージを送信しました-