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

【问题标题】：PubNub - Search for a chat match (foreign language learning chat app)PubNub - 搜索聊天匹配（外语学习聊天应用）
【发布时间】：2017-07-29 00:13:03
【问题描述】：

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

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

基本上，我的聊天应用是这样设计的：

首先向用户显示他们可以说什么语言以及他们想学习什么语言的屏幕
假设我说英语并且正在学习德语 (HomeController)
他们按下了聊天！按钮并转到我的 ChatController
从这里开始，用户在队列中，直到找到与其学习语言相匹配的母语人士（这是我遇到最多麻烦的部分）

这里有图片可以更好地了解：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>

用户可以在此处选择他们的母语以及他们正在学习的内容。然后按下聊天按钮，进入我的HomeController.js 中的submit() 函数。

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();
});

这里我的HomeController.js 中的submit() 函数将母语和学习语言信息放在我的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 中创建的变量找到一个德国本地人。找到后，他们进入聊天室并开始学习语言！

我的逻辑：

需要找出当前正在使用我的应用程序的人（例如 1000 人）
然后我在某种数组中搜索我想与之学习的母语人士
最直接的匹配将终止循环（或侦听器）并直接进入聊天

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

在 PubNub 上阅读了很多教程，解决了这个问题好几个小时，但我根本想不通。

非常感谢您的帮助。我尽量说清楚。

【问题讨论】：

首先，addListener not a function 一定意味着Pubnub 对象超出范围（它必须是）但此时没有进一步的了解。对于可用的母语人士列表，只需为每种语言创建一个频道：native.german、native.french 等。当用户登录时，让他们订阅正确的native.<lang> 频道。您可以使用hereNow 获取该语言的活跃/在线母语人士列表。并使用 PubNub 函数实时进行翻译，而无需访问您的服务器来完成这项工作：pubnub.com/docs/blocks-catalog/multilingual-chat
我们在私人支持中看到了您的询问。我们将在那里更详细地讨论并在此处分享详细信息作为官方答案。

标签： angularjs pubnub

【解决方案1】：

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

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

您可以使用 hereNow 获取该语言的活跃/在线母语使用者列表。

并使用PubNub Functions to do the translation in realtime 而不访问您的服务器来完成这项工作。

【讨论】：