- 40
- 0
在 Vue 项目中如何引用 SocketJS 和 Stomp 这两个依赖呢?
之前吾辈在测试的时候使用的是 CDN 服务引入的,但前端使用的是 Vue 全家桶,应该怎样才能在 Vue 中引入这两个依赖呢?或者不是用这两个库去实现服务端的消息订阅?
测试点 JavaScript 代码
<script type="application/javascript" src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script type="application/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script>
let socket = new SockJS('http://127.0.0.1:8080/endpoint');
stompClient = Stomp.over(socket);
stompClient.connect(
{},
// 连接成功回调函数.
frame => {
console.log('服务端 Socket 连接建立')
// 获取 websocket 连接的 sessionId
const sessionId = /\/([^\/]+)\/websocket/.exec(socket._transport.url)[1];
console.log("connected, session id: " + sessionId);
// 订阅广播消息(服务端单向推送)
const subscription_broadcast = stompClient.subscribe('/topic/broadcasting/unidirectional/allClient',
(response) => {
console.log(`[广播(服务端单向推送)]: ${response.body}`)
});
// 订阅广播消息(双向通信)
stompClient.subscribe('/topic/broadcasting/bilateral/allClient', res => {
console.log(`[广播(双向通信)]: ${res.body}`)
})
// 订阅私人消息(双向通信)
stompClient.subscribe(`/user/${sessionId}/push/bilateral/thisClient`, res => {
console.log(`[点对点推送(双向通信)]: ${res.body}`)
})
send()
}, error => {
console.log('Socket 连接失败')
});
function send() {
// 发送一个消息到服务端
var headers = {};
var body = {
'message': '消息内容'
};
stompClient.send("/talk", headers, JSON.stringify(body));
// 发送一个消息到客户端并且只向当前 session 通信
stompClient.send('/speak', headers, JSON.stringify(body))
}
/**
* 监听窗口关闭事件,窗口关闭前,主动关闭连接,防止连接还没断开就关闭窗口,server 端会抛异常
*/
window.onbeforeunload = function () {
if (stompClient !== null) {
stompClient.disconnect();
socket.close();
}
console.log('断开连接');
};
</script>
那么,客户端应该怎么才能引用依赖呢?或者说有其他解决方案?
0
打赏
收藏
点击回答
- 共 0 条
- 全部回答
-
ゾ等ミ流星ジ 普通会员 1楼
在 Vue 项目中,你可以通过以下步骤来引用 SocketJS 和 Stomp 这两个依赖:
- 首先,你需要在你的项目的
package.json文件中添加 SocketJS 和 Stomp 的依赖。例如:
json { "dependencies": { "socket.io": "^2.3.2", "stomp": "^1.10.1" } }- 然后,你需要在你的项目的
src/main.js文件中引入这两个依赖。例如:
```javascript import io from 'socket.io'; import stomp from 'stomp';
io.on('connection', (socket) => { console.log('A new connection was made');
socket.on('message', (message) => { console.log('Received message:', message); });
socket.send('Hello, world!'); }); ```
- 最后,你需要在你的项目的
public/index.html文件中引入 Socket.IO 和 Stomp 的 CSS 和 JavaScript 文件。例如:
```html
```
注意:这只是一个基本的示例,实际使用时你可能需要根据你的具体需求进行调整。例如,你可能需要处理 Socket.IO 和 Stomp 的错误,或者你可能需要使用 Socket.IO 的路由功能。
- 首先,你需要在你的项目的
更多回答
网站公告
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

