个人中心
gpt4 book ai didi

javascript - 如何使用 pubnub chatengine 添加私有(private)一对一聊天？

转载 作者：行者123 更新时间：2023-11-30 19:55:02 27 4
gpt4 key购买 nike

<分区>

其实，

  1. 我使用 PubNub 的聊天引擎创建了聊天应用程序，但我无法在同一 channel 上实现两个用户的私有(private)聊天。这意味着我有一个管理员和多个其他用户，这样他们就可以与管理员聊天，管理员可以与其他用户聊天，但是，同一 channel 的其他用户不应该看到一个用户和管理员聊天，即我想在两个用户之间实现私有(private)聊天同一个 channel 。所以请任何人使用聊天引擎引用或示例私有(private)聊天源代码。

  2. 第二期是用gr显示头像

PubNub的头像插件，这也是我无法显示的。请也分享这个。

这是我的 Javascript 文件:

        //create a new instance of ChatEngine
        ChatEngine = ChatEngineCore.create({
            publishKey: key
            subscribeKey: key
        },{ debug: true});

        // create a bucket to store our ChatEngine Chat object
        let myChat;

        // create a bucket to store 
        let me;

        // these function is used for typing indicator
        let sendmsg = function () {};
        let keypress = function () {};

        // create an optional config object to increase the default 
            timeout from 1000ms
        let typingconfig = { timeout: 1000 };

        // compile handlebars templates and store them for use later
        let peopleTemplate = Handlebars.compile($("#person- 
           template").html());
     let meTemplate = Handlebars.compile($("#message-template").html());
    let userTemplate = Handlebars.compile($("#message-response- 
           template").html());

        let searchconfig = { prop: 'state.full', caseSensitive: false }
        // this is our main function that starts our chat app
        const init = () => {
        ChatEngine.connect ('email', { username: 'name', full:'K' },
        'auth-key');

        // when ChatEngine is booted, it returns your new User as 
          `data.me`
        here my function is called by the pubnub

        ChatEngine.on('$.ready', function(data) {
        // store my new user as `me`
        me = data.me;
        //create a new ChatEngine Chat and I am connecting to chatenging
       using this option.
        myChat = new ChatEngine.Chat('chat-engine-server',true);      

        // here i am updating the the state of the user
        me.update(
        {
         full:'John Doe', 
         username: 'John',
         uuid: 'johndoe@gmail.com'
        });
        //starting private chat logic
        // this is what I wrote the code that use to create the privat 
         chat 

       myChat.invite(' invited email');

        me.direct.on('$.invite', (payload) => {
        console.log("invited user");    
        let secretChat = new ChatEngine.Chat(payload.data.channel);            
        document.getElementById("punlicLog").style.display = 'none';
        document.getElementById("privateLog").style.display = 'inline';
        document.getElementById("message-to-send").style.display='none';
        document.getElementById("private-message-to-send").
               style.display='inline';            
        here I am sending message to this payload
        secretChat.on('message', (payload) => {
          console.log(payload);
      // using this methd i am rendering private message
          privaterenderMessage(payload);
          });            
          //$('#privateLog').append("Now you are in a Private Chat with " 
          + globalUsr );            

       // this is take the message from the input box to send
        $("#privateMessage").keypress(function (event) {
        if (event.which == 13) {
        secretChat.emit('message', {
        text: $('#privateMessage').val()
         });
        $("#privateMessage").val('');
        event.preventDefault();
        }
        }); });

         //ending private chat message

        // this part belong to the pic
        console.log("before gravator'''''''''''''''''': ")  
        user = new ChatEngine.User(me.state.username, {email: 
         me.state.uuid});
                    console.log(" full name : "+me.state.full); 
                    $("#pic").attr("src", user.state.gravatar);

          myChat.on('message', (message) => {
                  console.log("message send mychat.on() method to send 
                      ");
                  renderMessage(message);
              });
              // when a user comes online, render them in the online list
              });

              bind our send button and return key to send message
              $('#sendMessage').on('submit', sendMessage)

          });

        };

        send a message to the Chat
        const sendMessage = () => {

            get the message text from the text input
            let message = $('#message-to-send').val().trim();

           if the message isn't empty
            if (message.length) {

                emit the message event to everyone in the Chat
                myChat.emit('message', {
                    text: message
                });

                // clear out the text input
                $('#message-to-send').val('');

            }

            // stop form submit from bubbling
            return false;

        };

        // render messages in the list
        const renderMessage = (message, isHistory = false) => {

            // use the generic user template by default
            let template = userTemplate;

            // if I happened to send the message, use the special 
               template for myself
            if (message.sender.uuid == me.uuid) {
                template = meTemplate;
            }

            let el = template({
                messageOutput: message.data.text,
                time: getCurrentTime(),
                user: message.sender.state
            });

            // render the message
            if(isHistory) {
              $('.chat-history ul').prepend(el); 
            } else {
              $('.chat-history ul').append(el); 
            }

            // scroll to the bottom of the chat
            scrollToBottom();
        };
        // end of render message 

        const privaterenderMessage = (message, isHistory = false) => {

            // use the generic user template by default
            let template = userTemplate;

            // if I happened to send the message, use the special 
           template for myself
            if (message.sender.uuid == me.uuid) {
                template = meTemplate;
            }

            let el = template({
                messageOutput: message.data.text,
                time: getCurrentTime(),
                user: message.sender.state
            });

        init();



        This is my Html Page to display the chat messages to the user
        <!DOCTYPE html>

<body>  
                <div class="container clearfix">
                    <div class="people-list" id="people-list">
                        <input type="text" id="search-user" 
        placeholder="Search user">
                         <ul class="list">
                        </ul>
                    </div>

                    <div class="chat">

                        <div class="chat-header clearfix">
                            <!-- <img src="" alt="avatar" /> -->
                            <div class="chat-about">
                                <div class="chat-with">ChatEngine Demo 
                    Chat</div>
                            </div>
                        </div>

                         here i am display ing globle chat messaage
                        <div class="chat-history " id="punlicLog">
                            <ul></ul>
                        </div>

                     here I will display the private chat message of the 
                      user
                        <div class="private-chat-history" id="privateLog" 

                style="display: none">
                            <ul></ul>
                        </div>

                        <span class="badge badge-pill badge-success" 
             id="typing" style="color:green"></span>

                   <form id="sendMessage" class="chat-message clearfix">
                  <input type="text" name="message-to-send" id="message- 
     to-send"
    placeholder="Type your message" rows="1"  
       onkeypress="keypress(event)"></input>
                            <input type="text" name="message-to-send" 
          class=
       "form-control" id="private-message-to-send" style="display: none" 
    placeholder
     ="Your message here..." onkeypress="keypress(event)">
                            <input type="submit" value="Send" >
                        </form>
                        <!-- end chat-message -->

                    </div>

                    <!-- end chat -->
                </div>
                <!-- end container -->

                 <!-- dynamic message display using javascript with the 
        pubnub -->
                 <script id="message-template" type="text/x-handlebars- 
      template">
                    <li class="clearfix">
                        <div class="message-data align-right">
                            <span class="message-data-time">{{time}}, 
             Today</span> &nbsp; &nbsp;
                            <span class="message-data-name"> 
      {{user.first}}</span> <i class="fa fa-circle me"></i>
                        </div>
                        <div class="message other-message float-right">
                            {{messageOutput}}
                        </div>
                    </li>
                </script>
                <script id="message-response-template" type="text/x- 
            handlebars- 
      template">
                    <li>
                        <div class="message-data">
                            <span class="message-data-name"><i class="fa 
           fa- 
        circle online"></i> {{user.first}}</span>
                            <span class="message-data-time">{{time}}, 
       Today</span>
                        </div>
                        <div class="message my-message">
                            {{messageOutput}}
                        </div>
                    </li>
                </script>


                    <!-- // starting private message rendering -->


                    <script id="private-message-template" type="text/x- 
         handlebars-template" style="display: none">
                        <li class="clearfix">
                            <div class="message-data align-right">
                                <span class="message-data-time">{{time}}, 
          Today</span> &nbsp; &nbsp;
                          <span class="message-data-name">{{user.first}} 
        </span> <i class="fa fa-circle me"></i>
                            </div>
                         <div class="message other-message float-right">
                                {{messageOutput}}
                            </div>
                        </li>
                    </script>
            <script id="private-message-response-template" type="text/x- 
        handlebars-template" >
                        <li>
                            <div class="message-data">
                         <span class="message-data-name"><i class="fa fa- 
         circle online"></i> {{user.first}}</span>
                                <span class="message-data-time">{{time}}, 
      Today</span>
                            </div>
                            <div class="message my-message">
                                {{messageOutput}}
                            </div>
                        </li>
                    </script>
                    <!-- // ending private message rendering -->


          <script id="person-template" type="text/x-handlebars-template">
                    {{#if state.full}}
                    <li class="clearfix" id="{{uuid}}">
                     <img src="" alt="photo"id="pic" style="height: 5px; 
       width: 5px"/>
                        <div class="about">
                            <div class="name">{{state.full}}</div>
                            <div class="status">
                              <i class="fa fa-circle online"></i> online
                            </div>
                        </div>
                    </li>
                    {{/if}}
                </script>
            </body>

      I want a private chat between the two users of the same channel and 
 multiple users also there and profile pic with gravatar also want`enter 
       code here.

27 4 0
文章推荐： c# - 从类型为 void 的方法返回任务
文章推荐： javascript - 如何返回公会的所有者名称
文章推荐： c# - 将 for 循环转换为带索引的 foreach
文章推荐： javascript - React 状态之外的连接函数
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com