如何将信息传递到套接字

Question

我做了一个简单的登录，它可以工作，并将一个小数据库连接到我的服务器。每当用户正确登录时，都会启动 Web 套接字连接。但是，当我在客户端通过身份验证后在客户端之间建立套接字连接时，我想向刚刚打开的套接字添加信息，以便跟踪与我的服务器有连接的所有用户的名称。我尝试了许多不同的方法，最终放弃了。这是我的客户端代码：

function authenticate()
{
   axios.post('/login', {
      Username: document.getElementById("username").value,
      Password: document.getElementById("password").value
   })
   .then(function (response) {
      let socket=io();
      /*console.log(response.data[0].ClientFirstName + 
      response.data[0].ClientLastName);*/
      socket.on('connect', function(){ <-this event doesn't fire
         console.log("connect"); <-is not displayed in the browser's console
      })
      window.location.replace('/public/Main.html');
   })
   .catch(function (error) {
   console.log(error);
   });
}

这是我的服务器代码：

const Express=require('express');
const path=require('path');
var app = Express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var mysql = require('mysql');
var con = mysql.createConnection({
  host: "localhost",
  user: "root",
  password: "",
  database: "ChatDB"
});
con.connect(function(err) {
  if (err)throw err;
  console.log("Connected!");
});
app.use(Express.json())
app.use('/public', Express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res){
  res.sendFile(__dirname + '/public/index.html');
});
app.post('/login', function(req, res){
  let a=req.body.Username;
  let b=req.body.Password;
  let query="SELECT ClientID, ClientFirstName, ClientLastName FROM Client WHERE ClientUsername='" + a + "' AND ClientPassword='" + b + "';";
  con.query(query, function (err, rows) {
    if (err){
      throw err;
    }
    else if(rows.length)
    {
      console.log(rows);
      res.json(rows);
    }
  })
});
io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
})
http.listen(3000, function(){
  console.log('listening on *:3000')
});

我尝试在客户端使用它来尝试获取数据，但它不起作用，或者至少我不知道如何在服务器端使用它：

let socket=io.connect("localhost:3000", {firstname: "adsfasdf", lastname: 
"asdfsadf"});

任何帮助将不胜感激

Answer 1

我们

只能带你到这里，而不仅仅是为你做这件事。您是否在 Socket.io 网站上查看了真正有用的教程？

关键是要意识到，在客户端和服务器上，您都在来回通信。您在一端emit或broadcast消息，on另一端收听。

因此，在您的客户端中，您仅在用户登录后启动套接字，然后仅在axios调用的.then()内启动套接字。您可能希望在其他地方初始化套接字，然后您可以添加侦听器并在您选择的任何地方发送消息。

下面是一个基本示例：

客户：

//initialize socket
const socket = io();
//add all your listeners outside of functions and call other functions in response
io.on('user added', function(user) { console.log({newUser: user}) })
function authenticate() { 
    axios(...).then(response=>{
        let userName = //some data you got back from response
        //send a message to the server who will broadcast
        socket.emit('new user', userName);
    })
}

服务器

// think of how you want to handle persistence
const users = [];
io.on('connection', function(socket){
    console.log('a user connected');
    // the server listeners for client initiated messages and responds
    socket.on('new user', function(user) {
        users.push(user);
        //tell everyone a new user joined
        io.emit('user added', user);
    });
    socket.on('disconnect', function(){
        console.log('user disconnected');
    });
})