在具有授权的路由内使用 Socket.io

Posted 2023-02-16

【中文标题】在具有授权的路由内使用 Socket.io

【英文标题】：Using Socket.io inside routes with authorization

【发布时间】：2020-06-09 09:07:20

【问题描述】：

我正在构建一个网络应用程序，我在其中授权用户，然后让他选择与他人聊天。下面是我的 server.js 代码。即使我在提交按钮的 Java 脚本代码中包含了 e.preventDefault()，当我点击发送时，页面也会刷新并且我的消息没有出现在那里。我尝试将套接字 io 代码放在路由之外的 server.js 中，但是它仍然无法正常工作。当代码没有与任何路由关联并且没有授权时，它运行良好。谁能帮我解决这个问题？

app.get("/userprofile/chat",ensureAuth, (req, res) => 
  res.render("index");
  //connection
  io.on("connection", function(socket)
    console.log("connected")
    socket.on("chatMessage", function(sent_msg)
    sent_msg = "[ " + getCurrentDate() + " ]: " + sent_msg;
    var newMsg=new Chat(msg:sent_msg)
   
    newMsg.save()
     .then(Msg=>
      socket.broadcast.emit("message",sent_msg);
     )
    .catch(err=>console.log(err))
      
   )
  

)

<form id="send-container">
    <input type="text" class="messageinput" required>
    <button type="submit" id="send">Send</button>
</form>

 const socket=io();
const messageForm=document.querySelector("#send-container");
const messageInput=document.querySelector(".messageinput");
const container=document.querySelector(".container");


socket.on("message",data=>
   outputMessage(data);
   container.scrollTop=container.scrollHeight;
)

messageForm.addEventListener("submit",(e)=>
   e.preventDefault();
   const msg=messageInput.value;
   socket.emit("chatMessage",msg);
   inputMessage(msg);
  container.scrollTop=container.scrollHeight;
   e.target.elements[0].value="";
   e.target.elements[0].focus();


)

【参考方案1】：

像这样制作你的表单标签

<form id="send-container" action="#">
    <input type="text" class="messageinput" required>
    <button type="submit" id="send">Send</button>
</form>

这个 action="#" 会让你的表单刷新。如果您的表单无法刷新，您必须像这样测试它以检查其他事情是否正常