不能在 stomp 客户端订阅中使用 "this" - React
Can't use "this" in stomp client subscribe - React
我有我的 Spring- 引导服务设置,所以我可以通过 websocket 向我的浏览器发送消息并且它有效。
//@MessageMapping
@RequestMapping(value = "/notify")
@SubscribeMapping("/notification")
@SendTo("/topic/notification")
public String sendNotification() throws Exception {
sendMessage();
return "Request to update Tanks has been sent!";
}
public void sendMessage() {
this.messagingTemplate.convertAndSend("/topic/notification", "IT WORKS");
}
这是来自 chrome 的控制台日志:
<<< MESSAGE
destination:/topic/notification
content-type:text/plain;charset=UTF-8
subscription:sub-1519225601109-13
message-id:f2qodiqn-8
content-length:8
IT WORKS
我希望能够从服务接收消息并更新反应状态,以便从后端重新获取。这是我的客户的样子:
var socket = new SockJS("http://localhost:6667/refresh");
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
console.log('connected: ' + frame);
stompClient.subscribe('/topic/notification', function(notification){
console.log(notification.body);
//this.showNotification(JSON.parse(notification.body).content);
//this.showNotification(notification.body);
})
}, function(err) {
console.log('err', err);
});
以及 componentDidMount()
中的提取
fetch(`http://localhost:6666/front/objects`)
.then(result=>result.json())
.then(fuelTanks=>this.setState({fuelTanks}))
.catch(function(err) {
console.log('Could not fetch: ' + err.message);
}
)
我无法使用 this.showNotification(notification.body)
,因此我无法将状态设置为能够重新获取我的对象。我尝试在 class 之外制作方法,但后来我无法使用主要 class.
中的任何内容
有没有办法让 运行 componentDidMount 再次做出反应,或者更好的是,当我通过 websocket 从 spring 收到消息时,只需访问我的 class 中的 fetch 方法?
像这样:
componentDidMount(){
var socket = new SockJS("http://192.168.1.139:8610/refresh");
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
console.log('connected: ' + frame);
stompClient.subscribe('/topic/notification', function(notification){
refetchTanks(); // call fetch tanks -> can't use "this"
})
}, function(err) {
console.log('err', err);
});
谢谢!
我尝试了一切以能够使用我的 class 方法和 stompClient 的 .subscribe
方法中的状态。如果服务终止,我能够连接并重新连接,但它无法正常工作。
我决定使用 react-stomp,效果很好。我可以在 onMessage=...
中使用 class 方法。这是我的代码的样子:
<SockJsClient
url = 'http://localhost:8610/refresh/'
topics={['/topic/notification']}
onConnect={console.log("Connection established!")}
onDisconnect={console.log("Disconnected!")}
onMessage={() => this.update()} <------ this method performs a new GET
request
debug= {true}
/>
我还必须在服务器端以特定方式发送消息,因为我在发送字符串时收到 JSON 错误。
this.messagingTemplate.send("/topic/notification", "{"text":"text"}");
<<< MESSAGE
destination:/topic/notification
content-type:text/plain;charset=UTF-8
subscription:sub-0
message-id:aaylfxl4-1
content-length:49
{
"text": "text"
}
它目前有效,但我很好奇是否有其他更好的解决方案来解决这个问题。
编辑:更好的解决方案 !使用第一个 post 中的代码并在 connect
之前创建一个变量,以便能够像这样 var self = this;
访问 this
,然后就可以像 self.update()
之后那样访问subscribe
!
我知道,这是一个有点老的问题,但由于每次搜索 stomp 问题时它都会弹出,所以我想到了回答它。在回调中访问 this 的方法是先将回调与 this 绑定,然后在回调中访问整个对象。
示例:
connectCallBack(){
this.setState({loading:false})
}
errorCallback=()=>{
}
componentDidMount() {
axios.post('http://localhost:8080/subscribe', null, { params: {
deviceId
}})
.then(response => response.status)
.catch(err => console.warn(err));
const socket = new SockJS('http://localhost:8080/test');
const stompClient = Stomp.over(socket);
//stompClient.connect();
stompClient.connect( {}, this.connectCallBack, this.errorCallback);
如果看到上面的代码,两个回调都可以访问它。
我有我的 Spring- 引导服务设置,所以我可以通过 websocket 向我的浏览器发送消息并且它有效。
//@MessageMapping
@RequestMapping(value = "/notify")
@SubscribeMapping("/notification")
@SendTo("/topic/notification")
public String sendNotification() throws Exception {
sendMessage();
return "Request to update Tanks has been sent!";
}
public void sendMessage() {
this.messagingTemplate.convertAndSend("/topic/notification", "IT WORKS");
}
这是来自 chrome 的控制台日志:
<<< MESSAGE
destination:/topic/notification
content-type:text/plain;charset=UTF-8
subscription:sub-1519225601109-13
message-id:f2qodiqn-8
content-length:8
IT WORKS
我希望能够从服务接收消息并更新反应状态,以便从后端重新获取。这是我的客户的样子:
var socket = new SockJS("http://localhost:6667/refresh");
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
console.log('connected: ' + frame);
stompClient.subscribe('/topic/notification', function(notification){
console.log(notification.body);
//this.showNotification(JSON.parse(notification.body).content);
//this.showNotification(notification.body);
})
}, function(err) {
console.log('err', err);
});
以及 componentDidMount()
fetch(`http://localhost:6666/front/objects`)
.then(result=>result.json())
.then(fuelTanks=>this.setState({fuelTanks}))
.catch(function(err) {
console.log('Could not fetch: ' + err.message);
}
)
我无法使用 this.showNotification(notification.body)
,因此我无法将状态设置为能够重新获取我的对象。我尝试在 class 之外制作方法,但后来我无法使用主要 class.
有没有办法让 运行 componentDidMount 再次做出反应,或者更好的是,当我通过 websocket 从 spring 收到消息时,只需访问我的 class 中的 fetch 方法?
像这样:
componentDidMount(){
var socket = new SockJS("http://192.168.1.139:8610/refresh");
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
console.log('connected: ' + frame);
stompClient.subscribe('/topic/notification', function(notification){
refetchTanks(); // call fetch tanks -> can't use "this"
})
}, function(err) {
console.log('err', err);
});
谢谢!
我尝试了一切以能够使用我的 class 方法和 stompClient 的 .subscribe
方法中的状态。如果服务终止,我能够连接并重新连接,但它无法正常工作。
我决定使用 react-stomp,效果很好。我可以在 onMessage=...
中使用 class 方法。这是我的代码的样子:
<SockJsClient
url = 'http://localhost:8610/refresh/'
topics={['/topic/notification']}
onConnect={console.log("Connection established!")}
onDisconnect={console.log("Disconnected!")}
onMessage={() => this.update()} <------ this method performs a new GET
request
debug= {true}
/>
我还必须在服务器端以特定方式发送消息,因为我在发送字符串时收到 JSON 错误。
this.messagingTemplate.send("/topic/notification", "{"text":"text"}");
<<< MESSAGE
destination:/topic/notification
content-type:text/plain;charset=UTF-8
subscription:sub-0
message-id:aaylfxl4-1
content-length:49
{
"text": "text"
}
它目前有效,但我很好奇是否有其他更好的解决方案来解决这个问题。
编辑:更好的解决方案 connect
之前创建一个变量,以便能够像这样 var self = this;
访问 this
,然后就可以像 self.update()
之后那样访问subscribe
!
我知道,这是一个有点老的问题,但由于每次搜索 stomp 问题时它都会弹出,所以我想到了回答它。在回调中访问 this 的方法是先将回调与 this 绑定,然后在回调中访问整个对象。 示例:
connectCallBack(){
this.setState({loading:false})
}
errorCallback=()=>{
}
componentDidMount() {
axios.post('http://localhost:8080/subscribe', null, { params: {
deviceId
}})
.then(response => response.status)
.catch(err => console.warn(err));
const socket = new SockJS('http://localhost:8080/test');
const stompClient = Stomp.over(socket);
//stompClient.connect();
stompClient.connect( {}, this.connectCallBack, this.errorCallback);
如果看到上面的代码,两个回调都可以访问它。