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('E:/test/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>

現在，如果您使用相同的使用者名稱連線兩個客戶端，它將給您一個錯誤，如下面的螢幕截圖所示 −

Chat Name Taken

一旦您提供了一個可接受的使用者名稱，您將被帶到一個包含訊息框和傳送訊息按鈕的螢幕。現在，我們必須處理訊息並將它們引導到已連線的客戶端。為此，修改您的 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('E:/test/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 的客戶端，並從兩個客戶端傳送了一些訊息 −

Chat Example
列印頁面
上一個
下一個
廣告