账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    在 Vue 项目中如何引用 SocketJS 和 Stomp 这两个依赖呢?
    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 这两个依赖:

      1. 首先,你需要在你的项目的 package.json 文件中添加 SocketJS 和 Stomp 的依赖。例如:

      json { "dependencies": { "socket.io": "^2.3.2", "stomp": "^1.10.1" } }

      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!'); }); ```

      1. 最后,你需要在你的项目的 public/index.html 文件中引入 Socket.IO 和 Stomp 的 CSS 和 JavaScript 文件。例如:

      ```html

      ```

      注意:这只是一个基本的示例,实际使用时你可能需要根据你的具体需求进行调整。例如,你可能需要处理 Socket.IO 和 Stomp 的错误,或者你可能需要使用 Socket.IO 的路由功能。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部