Javascript 有没有办法在更换道具后终止并重新启动新的web套接字连接？

我已经能够使用url建立到websocket的连接，url作为道具从App.js传递到子组件。更改props的值时，我希望已建立的websocket连接终止，并使用传递的新props值建立新连接

子组件在安装时启动连接

export class Stream extends Component {
  state = {
ws: null
//url: this.props.value
  };

  componentDidMount() {
this.connect();
  }

  componentDidUpdate(prevProps) {
if (this.props.value !== prevProps.value) {
  this.disconnect(prevProps);
  //this.connect(this.props.value);
}
  }

  componentWillUnmount() {
//socket.close();
  }

  connect = () => {
var socket = new WebSocket("wss://ws.dummy.net/");
let that = this; // cache the this
var subscribeMsg = {
  event: "subscribe",
  data: {
    channel: "order" + this.props.value
  }
};

function serializeData(data) {
  //console.log(data);
  that.setState({
    ws: data //Map the serialized data to the state
  });
}

// websocket onopen event listener
socket.onopen = () => {
  socket.send(JSON.stringify(subscribeMsg));
  console.log("connected websocket main component");
};

socket.onmessage = function(evt) {
  var response = JSON.parse(evt.data);
  console.log(response);
  /**
   * This switch statement handles message logic. It processes data in case of data event
   * and it reconnects if the server requires.
   */
  switch (response.event) {
    case "data": {
      serializeData(response.data);
      break;
    }
    default: {
      //console.log("Error in case assignment");
      break;
    }
  }
};
// websocket onclose event listener
socket.onclose = e => {
  console.log("Socket is closed");
};

// websocket onerror event listener
socket.onerror = err => {
  console.error(
    "Socket encountered error: ",
    err.message,
    "Closing socket"
  );
};
  };

  disconnect = prevProps => {
var socket = new WebSocket("wss://ws.dummy.net/");
var unsubscribeMsg = {
  event: "unsubscribe",
  data: {
    channel: "order" + prevProps.value
  }
    };

socket.close();
socket.onclose = e => {
  socket.send(JSON.stringify(unsubscribeMsg));
  console.log("DISCONNECT Socket is closed");
};
  };
}

---

不能像组件的

disconnect

方法中的

socket.onclose

事件处理程序那样通过闭合连接传输数据

我建议提取与创建套接字和将事件处理程序注册到函数有关的所有内容。比如说,

/**
*创建websocket并注册其处理程序
*@param onMessageCb
*@param-uri
*@param值
*/
函数createWebSocket（onMessageCb、uri、值）{
const socket=新的WebSocket（uri）；
常量subscribemg={
事件：“订阅”，
数据：{
频道：“订单”+价值
}
};
const unsubscribemg={
事件：“取消订阅”，
数据：{
频道：“订单”+价值
}
};
//websocket onopen事件侦听器
socket.onopen=（）=>{
send（JSON.stringify（subscribemg））；
日志（“连接的websocket主组件”）；
};
socket.onmessage=函数（evt）{
var response=JSON.parse（evt.data）；
控制台日志（响应）；
/**
*这个switch语句处理消息逻辑。它在发生数据事件时处理数据
*如果服务器需要，它会重新连接。
*/
开关（response.event）{
案例“数据”：{
onMessageCb（response.data）；
打破
}
默认值：{
//console.log（“案例分配错误”）；
打破
}
}
};
//websocket onclose事件侦听器
socket.onclose=e=>{
日志（“套接字已关闭”）；
};
//websocket onerror事件侦听器
socket.onerror=err=>{
控制台错误(
套接字遇到错误：“，
错误消息，
“闭合插座”
);
};
函数关闭（）{
send（JSON.stringify（unsubscribemg））；
socket.close（）；
}
返回{
send:socket.send，
关闭
};
}

然后使用此函数创建套接字，并在组件实例上设置套接字属性

导出类流扩展组件{
状态={
ws:null
//url:this.props.value
};
socket=null；
setWs=（数据）=>{
这是我的国家({
ws:data//将序列化数据映射到状态
});
}
componentDidMount（）{
this.socket=createWebSocket（this.setWs、this.props.url、this.props.value）；
}
componentDidUpdate（prevProps）{
if（this.props.value！==prevProps.value）{
this.socket.close（）；
this.socket=createWebSocket（this.setWs、this.props.url、this.props.value）；
}
}
组件将卸载（）{
this.socket.close（）；
}
}