您如何在您的网站中实施 quickblox？

Posted 2023-02-23

【中文标题】您如何在您的网站中实施 quickblox？

【英文标题】：How do you implement quickblox in your website?

【发布时间】：2018-10-12 13:36:40

【问题描述】：

我只是 Web 开发的初学者。所以，这可能是一个非常愚蠢的问题。 我想使用 javascript 将 quickblox 包含到我的网站中。到目前为止，我已将 javascript 包含到我的网站中并创建了 quickblox 管理端应用程序。 您如何在您的网站中设置它以登录和聊天。我已经阅读了文档，但没有得到下一步该做什么。如果有人可以详细说明，如何从我们的网页打开 quickblox 窗口。 任何帮助表示赞赏。

编辑：- 我已经编辑了代码，但现在它显示在控制台上连接，然后什么也没有发生。我不知道我是否传递了不正确的 url 或其他东西。

<script>

            var QBAPP = 
                app_id: 'xxxx',
                auth_key: 'xxxxxxx',
                auth_secret: 'xxxxxxxx'
            ;

      // our parameters to connect to QuickBlox Chat service
            var CHAT = 
                server: 'chat.quickblox.com',
                bosh_server: 'http://chat.quickblox.com:5280'
            ;

            var params, connection;
            params = 
                login: 'xxxxxxx',
                password: 'xxxxxxx'
            ;

            QB.init(QBAPP.app_id, QBAPP.auth_key, QBAPP.auth_secret);
            QB.createSession(params, function (err, res) 
                if (err) 
                    console.log(err.detail);
                 else 
                    connectChat(res.user_id, params.password);
                
            );


            function connectChat(user_id, password) 
                var userJID = user_id + "-" + QBAPP.app_id + "@" + CHAT.server;
                var userPass = password;

                connection = new Strophe.Connection(CHAT.bosh_server);
                connection.rawInput = rawInput;
                //connection.rawOutput = rawOutput;

                connection.connect(userJID, userPass, function (status) 
                    switch (status) 
                        case Strophe.Status.ERROR:
                            console.log('[Connection] Error');
                            break;
                        case Strophe.Status.CONNECTING:
                            console.log('[Connection] Connecting');
                            break;
                        case Strophe.Status.CONNFAIL:
                            console.log('[Connection] Failed to connect');
                            break;
                        case Strophe.Status.AUTHENTICATING:
                            console.log('[Connection] Authenticating');
                            break;
                        case Strophe.Status.AUTHFAIL:
                            console.log('[Connection] Unauthorized');
                            break;
                        case Strophe.Status.CONNECTED:
                            console.log('[Connection] Connected');

                            // Create an event handler for getting messages
                            connection.addHandler(onMessage, null, 'message', null, null, null);
                            // send a presence message
                            connection.send($pres().tree());

                            break;
                        case Strophe.Status.DISCONNECTING:
                            console.log('[Connection] Disconnecting');
                            break;
                        case Strophe.Status.DISCONNECTED:
                            console.log('[Connection] Disconnected');
                            break;
                        case Strophe.Status.ATTACHED:
                            console.log('[Connection] Attached');
                            break;
                    
                );
            

      // logs
            function rawInput(data) 
                console.log('RECV: ' + data);
            
            function rawOutput(data) 
                console.log('SENT: ' + data);
            

            function onMessage(msg) 
                console.log(msg);

                var to = msg.getAttribute('to');
                var from = msg.getAttribute('from');
                var type = msg.getAttribute('type');
                var elems = msg.getElementsByTagName('body');

                // we must return true to keep the handler alive.  
                // returning false would remove it after it finishes.
                return true;
            

            function sendMessage() 
                params = 
                    to: '<some JID>', // JID of recipient QB User
                    from: connection.jid, // JID of sender QB user
                    type: 'chat' // type of the message
                
                var msg = $msg(params).c('body').t('Hello world!');
                connection.send(msg.tree());
            


        </script>

<html>
 <head>
  <meta charset="UTF-8">
  <title>Simple Recorder.js demo with record, stop and pause</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/quickblox/2.12.0/quickblox.min.js"></script>
         <script type="javascript" src="<?php echo base_url() ?>assets/js/strophe"></script>
 </head>
 <body>
 
     <h1>Welcome to chatbox</h1>
     <p>begin chatting here</p>
     </body>
     </html>

【参考方案1】：

您包含没有版本号的 Quickblox CDN。

 src="https://cdnjs.cloudflare.com/ajax/libs/quickblox/x.x.x/quickblox.min.js">

确保在 x.x.x 的位置添加版本号

这是最新版本：

https://cdnjs.cloudflare.com/ajax/libs/quickblox/2.12.0/quickblox.min.js

脚本现在没有加载，这就是它不起作用的原因。