gpt4 book ai didi

javascript - Spring stomp websockets with vue.js

转载 作者:数据小太阳 更新时间:2023-10-29 04:57:55 26 4
gpt4 key购买 nike

我正在尝试将 Spring websockets (STOMP) 与 Vue 结合使用,但不知道该怎么做,甚至不知道该怎么做。我的 websockets 使用纯 JS,但是当我尝试使用 Vue 时,我卡住了。这是我的 Vue 代码:

var app = new Vue({
el: '#app',
data: {
stompClient: null,
gold: 0
},
methods: {
sendEvent: function () {
this.stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()}));
}
},
created: function () {
this.stompClient = Stomp.over(new SockJS('/gs-guide-websocket'));
this.stompClient.connect()
this.stompClient.subscribe('/topic/greetings', function (greeting) {
console.log(JSON.parse(greeting.body).content);
});
},

})

我的连接和发送功能正常,我可以在后端看到消息,但问题出在订阅功能上。它需要一个回调函数,但这永远不会触发。我还尝试在 vue 中创建一个方法并调用它

this.stompClient.subscribe('/topic/greetings', vueFunc())

但这也不起作用。我在 https://github.com/FlySkyBear/vue-stomp 找到了一些图书馆但我不知道如何使用它,它看起来真的很乱。那我宁愿使用纯 JS。

谁有解决办法?谢谢

最佳答案

这是使用 Spring Boot Websocket (STOMP) 和 Vue CLI 的工作示例。(这里有更详细的描述http://kojotdev.com/2019/07/using-spring-websocket-stomp-application-with-vue-js/)

  1. https://spring.io/guides/gs/messaging-stomp-websocket/ 下载 Spring Boot 演示
  2. WebSocketConfig中添加允许的来源

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
    registry.addEndpoint("/gs-guide-websocket")
    .setAllowedOrigins("http://localhost:8081")
    .withSockJS();
    }
  3. 运行项目

现在启动 Vue CLI 项目并:

  1. 安装 SockJS npm install sockjs-client
  2. 安装 STOMP npm install webstomp-client
  3. 我使用引导类,所以你需要 npm install bootstrap@3 只是为了布局

添加 .vue 组件:

<template>
<div>
<div id="main-content" class="container">
<div class="row">
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label for="connect">WebSocket connection:</label>
<button id="connect" class="btn btn-default" type="submit" :disabled="connected == true" @click.prevent="connect">Connect</button>
<button id="disconnect" class="btn btn-default" type="submit" :disabled="connected == false" @click.prevent="disconnect">Disconnect
</button>
</div>
</form>
</div>
<div class="col-md-6">
<form class="form-inline">
<div class="form-group">
<label for="name">What is your name?</label>
<input type="text" id="name" class="form-control" v-model="send_message" placeholder="Your name here...">
</div>
<button id="send" class="btn btn-default" type="submit" @click.prevent="send">Send</button>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table id="conversation" class="table table-striped">
<thead>
<tr>
<th>Greetings</th>
</tr>
</thead>
<tbody>
<tr v-for="item in received_messages" :key="item">
<td>{{ item }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</template>

<script>
import SockJS from "sockjs-client";
import Stomp from "webstomp-client";

export default {
name: "websocketdemo",
data() {
return {
received_messages: [],
send_message: null,
connected: false
};
},
methods: {
send() {
console.log("Send message:" + this.send_message);
if (this.stompClient && this.stompClient.connected) {
const msg = { name: this.send_message };
this.stompClient.send("/app/hello", JSON.stringify(msg), {});
}
},
connect() {
this.socket = new SockJS("http://localhost:8080/gs-guide-websocket");
this.stompClient = Stomp.over(this.socket);
this.stompClient.connect(
{},
frame => {
this.connected = true;
console.log(frame);
this.stompClient.subscribe("/topic/greetings", tick => {
console.log(tick);
this.received_messages.push(JSON.parse(tick.body).content);
});
},
error => {
console.log(error);
this.connected = false;
}
);
},
disconnect() {
if (this.stompClient) {
this.stompClient.disconnect();
}
this.connected = false;
},
tickleConnection() {
this.connected ? this.disconnect() : this.connect();
}
},
mounted() {
// this.connect();
}
};
</script>

<style scoped>

</style>

运行项目并测试,它应该默认从8081端口启动。

关于javascript - Spring stomp websockets with vue.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46818674/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com