Socket.IO - 聊天示例

Socket.IO - 聊天示例 首页 / Socket.io入门教程 / Socket.IO - 聊天示例

现在我们已经很熟悉Socket.IO,让我们编写一个聊天应用程序,可以在不同的聊天室中使用它进行聊天,我们将允许用户选择用户名,并允许他们使用他们聊天。因此,首先,让我们设置HTML文件以请求用户名-

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Learnfk</title>
   </head>
   <script src="https://cdn.jsdelivr.net/npm/socket.io-client@2/dist/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 Learnfk</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('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

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

Linux性能优化实战 -〔倪朋飞〕

重学线性代数 -〔朱维刚〕

乔新亮的CTO成长复盘 -〔乔新亮〕

说透区块链 -〔自游〕

说透低代码 -〔陈旭〕

大厂设计进阶实战课 -〔小乔〕

快手 · 音视频技术入门课 -〔刘歧〕

手把手带你写一个MiniSpring -〔郭屹〕

PPT设计进阶 · 从基础操作到高级创意 -〔李金宝(Bobbie)〕

好记忆不如烂笔头。留下您的足迹吧 :)