关闭前一个套接字实例 javascript

Question

希望你们一切都好。我正在尝试创建一个像 instagram 一样的聊天收件箱，我遇到了一个问题，即设计必须以某种方式在屏幕左侧显示线程，并且当单击特定线程时，它是对应的如截图所示，聊天框出现在右侧

这种方法的问题在于，在客户端，我创建了一个函数，该函数通过承诺对象调用数据，只要单击线程，就会加载数据，操作浏览器历史记录并启动套接字，这就是 javascript 的用途看起来像

收件箱.html

function click_thread(e){
    
    $("#Chatbox").empty()
    $(".ChatLabel").remove()
    div=document.createElement("div")
    h3=document.createElement("h3")
    div.className="ChatLabel"
    h3.innerText=this.children[0].children[0].children[0].innerText
    div.appendChild(h3)
    $("#Chatholder").prepend(div)
    console.log(this.children[0].children[0].children[0].innerText);
    var other_user= this.children[0].children[0].children[0].innerText
      
    window.history.pushState(`inbox/${other_user}`,other_user,`${other_user}`)

    fetch(`/inbox/${other_user}`).then(response => response.json())
    .then(data => {

        messages= data;
        last_message_retriever(messages);
        data.messages.reverse().forEach(add_message)
            })

// For Socket initiation
var loc=window.location
var wsStart="ws://"

if (loc.protocol =="https:"){
    wsStart="wss://"
}
// Socket connection 
var endpoint=  wsStart+loc.host+loc.pathname
var socket= new ReconnectingWebSocket(endpoint)

var chatholder= $("#Chatbox")
var form=$("#form")
var msg_input=$("#chat_message")

// Whenever a socket receives message from server
socket.onmessage=function(e){
    console.log("message",e)
    var msg_rec=JSON.parse(e.data)
    console.log(msg_rec)
    add_received_message(msg_rec.message,msg_rec.username)
    }
//When soocket sends data to the the server 
socket.onopen=function(e){
    console.log("open",e)
    // sends the status of message
    $("#chat_message").on("click",function(e){
        socket.send(JSON.stringify({"status":"read",
            "msg":window.message}))
    })
    if($("#chat_message").length >0){
    form.submit(function(event){
        event.preventDefault()
        var msgtext=msg_input.val()
        var me =$("#myusername").val()
        data={
            "message":msgtext,
            'username':me
        }
        console.log(data)
        console.log("message",msgtext)
        socket.send(JSON.stringify(data))
        form[0].reset()

    })
    }};
socket.onerror=function(e){
    console.log("error",e)
}
socket.onclose=function(e){
    console.log("close",e)
            
}
};

当用户第二次点击一个线程时，问题就出现在这部分，它也会为另一个用户启动一个套接字对象，同时打开两个 websocket，并且当一条消息通过以下方式发送到服务器时提交按钮，两个套接字都发送消息，打算发送消息的一个将发送它，但另一个未关闭的连接将向服务器发送一个空字符串，从而破坏数据库。 任何有关这方面的帮助将不胜感激。

Answer 1

如果套接字已经打开，请关闭它。

if (socket.readyState === WebSocket.OPEN) {
    socket.close()
} 

然后连接到新的socket。