PubNub - 搜索聊天匹配（外语学习聊天应用）

时间：2017-07-29 00:13:04

标签： angularjs pubnub

我试图制作一个类似于.com.com的外语聊天应用程序（因为我喜欢语言）！

我正在使用PubNub和AngularJS制作聊天应用程序。

基本上，我的聊天应用程序设计如下：

  1. 首先，向用户显示他们可以说什么语言以及他们想要学习什么语言的屏幕
  2. 我们说我是英语使用者，我正在学习德语（HomeController）
  3. 他们按下CHAT！按钮并转到我的ChatController
  4. 从这里开始，用户就在队列中，直到找到与他们的学习语言匹配的母语人员（这是我最麻烦的部分）< / em>的

    5. 以下是获得更好主意的图片：http://imgur.com/a/1yGST

    这是我到目前为止所做的：

      

    的index.html 

    <!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Linga!</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="css/reset.css" />
        <link rel="stylesheet" type="text/css" href="css/semantic.min.css">
        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <!-- AngularJS and jQuery -->
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
        <script
          src="http://code.jquery.com/jquery-3.2.1.min.js"
          integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
          crossorigin="anonymous">
        </script>

        <!-- PubNub Service -->
        <script src="http://cdn.pubnub.com/pubnub.min.js"></script>
        <script src="https://cdn.pubnub.com/sdk/pubnub-angular/pubnub-angular-4.0.2.min.js"></script>

        <!-- Underscore support -->
        <script src="js/vendor/underscore-min.js"></script>

        <!-- Scroll Glue -->
        <script src="https://cdn.rawgit.com/Luegg/angularjs-scroll-glue/master/src/scrollglue.js"></script>

        <!-- Semantic UI JS -->
        <script src="js/vendor/semantic.min.js"></script>
    </head>
    <body ng-app="ChatApp">
        <div ng-view></div>

        <!-- App -->
        <script src="js/app.js"></script>

        <!-- Controllers -->
        <script src="js/controllers/HomeController.js"></script>
        <script src="js/controllers/ChatController.js"></script>
    </body>
</html>

    我使用ng-view在HomeController.js和ChatController.js之间路由。

      

    home.html查看

    <div id="background"></div>

<div class="main">
    <div class="ui container">
        <div class="ui center aligned segment glass">
            <h1 id="linga">Ling<span>a</span></h1>
            <form class="ui form" ng-submit="submit()" name="chatForm">
                <div class="field">
                    <label>I speak</label>
                    <select class="ui fluid dropdown" ng-model="selectedNative" ng-options="language.name for language in languages">
                        <option value="">Language</option>
                    </select>
                </div>
                <div class="field">
                    <label>Find someone</label>
                    <select class="ui fluid dropdown" ng-model="selectedLearning" ng-options="language.name for language in languages">
                        <option value="">Language</option>
                    </select>
                </div>
                <button class="ui button" id="submit" type="submit">CHAT</button>
            </form>
        </div>
    </div>
</div>

    用户在这里选择他们原生的语言和他们正在学习的内容。然后按下聊天按钮，转到submit()中的HomeController.js功能。

      

    HomeController.js 

    app.controller('HomeController', ['$scope', '$location', 'languageService', function($scope, $location, languageService){
    //$scope.hello = "hi!";
    $scope.languages = [
    {
        name:'German',
        flag:'img/flags/de.png'
    },
    {
        name:'French',
        flag:'img/flags/fr.png'
    },
    {
        name:'English',
        flag:'img/flags/us.png'
    },
    {
        name:'Portuguese',
        flag:'img/flags/br.png'
    },
    {
        name:'Persian',
        flag:'img/flags/ir.png'
    },
    {
        name:'Russian',
        flag:'img/flags/ru.png'
    },
    {
        name:'Swedish',
        flag:'img/flags/se.png'
    },
    {
        name:'Turkish',
        flag:'img/flags/tr.png'
    },
    {
        name:'Spanish',
        flag:'img/flags/es.png'
    },
    {
        name:'Italian',
        flag:'img/flags/it.png'
    }
    ];

    $scope.submit = function(){
        languageService.setNative($scope.selectedNative.name);
        languageService.setLearning($scope.selectedLearning.name);
        $location.path("/chat");
    }

}]);

$(document).ready(function(){
    $('.ui.dropdown').dropdown();
});

    此处submit()中的HomeController.js功能会将原生语言和学习语言信息放入languageService，以便我的ChatController.js可以使用这些信息。

      

    app.js 

    var app = angular.module('ChatApp', ['ngRoute', 'pubnub.angular.service', 'luegg.directives']);

app.service('languageService', function(){
    var languages = {
        nativeLanguage: '',
        learningLanguage: ''
    };

    return{
        setNative: setNative,
        setLearning: setLearning,
        getLanguages: getLanguages
    };

    function getLanguages(){
        return languages;
    };

    function setNative(nativeLanguage){
        languages.nativeLanguage = nativeLanguage;
    };

    function setLearning(learningLanguage){
        languages.learningLanguage = learningLanguage;
    };
});

app.config(function($routeProvider, $locationProvider){
    $routeProvider
    .when('/', {
        controller:'HomeController',
        templateUrl:'views/home.html'
    })
    .when('/chat', {
        controller:'ChatController',
        templateUrl:'views/chat.html'
    })
    .otherwise({
        redirectTo: '/'
    });
});

app.directive('ngEnter', function () {
    return function (scope, element, attrs) {
        element.bind("keydown keypress", function (event) {
            if(event.which === 13) {
                scope.$apply(function (){
                    scope.$eval(attrs.ngEnter);
                });

                event.preventDefault();
            }
        });
    };
});

    app.js中的此服务将从HomeController.js获取的信息放入控制器中。

      

    ChatController.js 

    app.controller('ChatController', ['$scope', '$rootScope', 'languageService', 'Pubnub', 
    function($scope, $rootScope, languageService, Pubnub){
    $scope.languages = languageService.getLanguages();
    $scope.channel = 'messages-channel';
    // Generating a random uuid between 1 and 100 using an utility function from the lodash library.         
    $scope.uuid = _.random(100).toString();
    Pubnub.init({
        publish_key: 'demo',
        subscribe_key: 'demo',
        uuid: $scope.uuid
    });

    // Send the messages over PubNub Network
    $scope.sendMessage = function() {
       // Don't send an empty message 
       if (!$scope.messageContent || $scope.messageContent === '') {
            return;
        }
        Pubnub.publish({
            message: {
                content: $scope.messageContent,
                sender_uuid: $scope.uuid,
                date: new Date()
            },
            channel: $scope.channel
        });
        // Reset the messageContent input
        $scope.messageContent = '';

    }

    $scope.messages = [];

    // Subscribing to the ‘messages-channel’ and trigering the message callback
    Pubnub.subscribe({
        channel: $scope.channel,
        withPresence: true,
        triggerEvents: ['callback']
    });

    // Listening to the callbacks
    $rootScope.$on(Pubnub.getMessageEventNameFor($scope.channel), function(ngEvent, m){
        $scope.$apply(function(){
            $scope.messages.push(m);
        });
    });
}]);
      

    chat.html查看

    <div class="main-chat">
    <div class="ui container">
        <div class="chat-box ui segment" id="style-3" scroll-glue>
            <p>Searching for a {{languages.learningLanguage}} speaker ...</p>
            <ul>
                 <li ng-repeat="message in messages">
                   <strong>Anonymous {{message.sender_uuid}}: </strong>
                   <span>{{message.content}}</span>
                 </li>
            </ul> 
        </div>
        <div class="chat-field ui segement">
            <div class="ui form">
                <textarea ng-enter="sendMessage()" ng-model="messageContent"></textarea>
            </div>
        </div>
    </div>
</div>

    所以在这里，我被困住了。例如，如果我正在学习德语，我希望我的聊天应用程序保持排队，直到使用我在languageService中创建的变量找到德语原生语。找到后，他们会进入聊天室并开始学习语言！

    我的逻辑：

    1. 需要了解目前正在使用我的应用的用户（例如1,000人）
    2. 然后我在某种数组中搜索我想要学习的母语
    3. 最直接的匹配将终止循环（或监听器）并直接进入聊天

      4. 我确实尝试将Pubnub.addListener添加到ChatController.js，但它说Pubnub.addListener is not a function错误。

      在PubNub上阅读很多教程已经好几个小时解决了这个问题，但我根本无法解决这个问题。

      非常感谢你的帮助。我试图让它尽可能清楚。

1 个答案:

答案 0 :(得分：0)

首先，addListener不是函数必须意味着PubNub对象超出范围（必须是），但目前还没有进一步的见解。

要获取可用的母语人士列表，只需为每种语言创建一个频道：native.german，native.french等。当用户登录时，让他们订阅正确的native.<lang>频道。

您可以使用此处获取该语言的有效/在线母语人士列表。

使用PubNub Functions to do the translation in realtime而无需点击服务器即可完成这项工作。

相关问题
最新问题