firebase-perf_使用node-webkit，Firebase和AngularJS构建聊天应用程序

最新推荐文章于 2024-08-28 09:30:41 发布

dingshi7798

最新推荐文章于 2024-08-28 09:30:41 发布

阅读量171

点赞数

文章标签： java python javascript vue js ViewUI

原文链接：https://www.sitepoint.com/building-chat-app-node-webkit-firebase-angularjs/

版权

firebase-perf

在本文中，我们将构建一个名为vTak的基于桌面的聊天应用程序。我们将使用node-webkit为核心桌面应用程序和Firebase提供动力，作为我们的实时数据存储。我们将使用名为slush-wean的slush生成器来构建基本的node-webkit / Express / Angular应用。最终产品将如下图所示。

应用截图

先决条件

如果您不熟悉node-webkit，请参考以下资源：

Node Webkit –使用Node和Web技术构建桌面应用程序
 节点Webkit驱动的仪表板应用程序
 节点webkit和Angularjs – MovieStub应用

如果您不熟悉Firebase，则应查看以下资源：

Firebase入门

我建议在使用node-webkit应用程序时使用Sublime文本。有关更多信息，请参见此处。

应用程序

如前所述，我们将使用node-webkit，Firebase和Angular构建一个名为vTak的聊天应用程序。 vTak将允许用户通过注册或使用社交身份验证提供程序（例如Twitter，Google和Facebook）进行登录。为此，我们将利用Firebase的简单登录。用户登录后，我们将显示要加入的聊天室列表。用户选择房间后，我们会将用户连接到该房间并获取所有聊天消息。然后，用户可以开始聊天。

入门

为了构建应用程序基础，我们将利用一个名为slush-wean的slush生成器。这将通过Express和Angular集成为我们搭建一个基本的node-webkit应用。

创建一个名为vTak的新文件夹，并在此处打开一个新的终端/提示。首先，我们将使用以下命令全局安装gulp ， slush和slush-wean ：

$ npm i -g gulp slush slush-wean

要搭建Wean App，请运行slush wean 。通过输入项目名称vTak完成脚手架。 Slush将花一些时间来设置项目并下载所需的依赖项。要运行该应用程序，请执行gulp run 。

gulp run将触发node-webkit-builder获取运行该node-webkit应用程序所需的库，因此您不必担心。这是一次过程，最多需要5分钟。下载完成后，将启动dekstop应用。

应用启动时，您会看到一个启动屏幕约3秒钟，然后出现主页。如果签出脚手架项目，则应看到以下结构：

.
├── app.js
├── gulpFile.js
├── index.html
├── package.json
├── public
│   ├── css
│   │   ├── app.css
│   │   └── bootstrap.css
│   ├── fonts
│   │   ├── ...
│   ├── js
│   │   └── app.js
│   ├── lib
│   │   ├── angular-resource.min.js
│   │   ├── angular-route.min.js
│   │   ├── angular.min.js
│   │   ├── bootstrap.min.js
│   │   └── jquery.min.js
│   └── partials
│       └── head.html
├── routes
│   └── index.js
└── views
    └── index.ejs

快速概述：

app.js ：Express服务器配置
gulpFile.js ：任务运行器
index.html ：应用程序主页/启动屏幕
公用文件夹 ：静态资源（客户端-我们的应用程序将在这里开发）
路线：特快路线
view ：Express提供的Angularjs应用程序的初始视图

我们的第一步是设置身份验证。为了使这篇文章保持简单，我写了另一篇名为node-webkit和Firebase的文章-Simple and Social Authentication 。您可以按照该帖子将身份验证与我们的node-webkit应用集成。

我将继续以上帖子的输出。您可以从以上文章中构建应用程序，也可以从此repo克隆ng-auth文件夹。克隆/下载vTak ，清除vTak文件夹的内容并将ng-auth的内容复制到vTak 。

注意：我们将使用以上文章中的Angular版本。

复制内容后，运行npm i以安装依赖项。接下来，根据您的操作系统打开gulpFile.js并注释/取消注释任务。最后打开/public/js/controllers.js并将第5行更新为：

var ref = new Firebase('https://nwkchatapp.firebaseio.com/');

如果需要，您可以配置自己的Firebase帐户。无论您采用哪种方法，最终的项目结构都应该是：

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

项目目录结构

并且，当您运行应用程序（ gulp run ）时，您应该看到以下登录屏幕。

登入画面

继续发展

您可以在index.html和package.json中将应用程序名称更新为vTak 。

接下来，我们将下载所需的Firebase文件。下载firebase.js ， angularfire.min.js和火力点，简单login.js和甩掉他们内部public/lib文件夹中。

如下所示更新views/index.ejs 。

<!DOCTYPE html>
<html ng-app="ng-auth">

<head>
  <title>vTak</title>
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="lib/angular.min.js"></script>
  <script src="lib/angular-route.min.js"></script>
  <script src="lib/angular-resource.min.js"></script>
  <script type="text/javascript" src="lib/firebase.js"></script>
  <script type="text/javascript" src="lib/firebase-simple-login.js"></script>
  <script type="text/javascript" src="lib/angularfire.min.js"></script>
  <script type="text/javascript" src="lib/jquery.min.js"></script>
  <script type="text/javascript" src="lib/bootstrap.min.js"></script>
  <script src="js/app.js"></script>
  <script src="js/factory.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/directives.js"></script>
</head>
</head>

<body>

  <div class="container" ng-controller="AppCtrl">
    <div ng-include src="'partials/head.html'"></div>
    <hr/>
    <ng-view></ng-view>
  </div>
</body>

</html>

现在，我们将稍微清理应用程序的主页（用户登录后将被定向到的页面）。打开public/partials/head.html并进行如下更新：

<div class="header" ng-controller="Toolbar">
  <div class="btn-group pull-right">
    <a href="#" class="btn btn-xs btn-default" ng-show="user" ng-click="logoutUser()">Logout</a>
    <button ng-click="minimize()" type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-minus"></span>
    </button>
    <button ng-click="toggleFullscreen()" type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-fullscreen"></span>
    </button>
    <button ng-click="close()" type="button" class="btn btn-default btn-xs">
      <span class="glyphicon glyphicon-remove"></span>
    </button>
  </div>
  <h1>vTak</h1>
</div>

我们已将注销按钮从页面正文移至窗口操作图标旁边的标题。

接下来，打开public/js/controllers.js并更新AppCtrl ，如下所示：

ngAuth.controller('AppCtrl',
  function($rootScope, $scope, $window, $firebaseSimpleLogin) {
    $rootScope.URL = 'https://nwkchatapp.firebaseio.com/';
    var ref = new Firebase($rootScope.URL);
    $rootScope.authClient = $firebaseSimpleLogin(ref);

    $rootScope.redirect = function(user) {
      if ($window.location.href.indexOf('home') < 0)
        $window.location.assign('http://localhost:3000/#home');

      if (user.provider == 'password') {
        user.name = user.email;
        user.img = '/img/user.png'
      } else if (user.provider == 'facebook') {
        user.name = user.displayName;
        user.img = user.thirdPartyUserData.picture.data.url;
      } else if (user.provider == 'twitter') {
        user.name = user.displayName;
        user.img = user.thirdPartyUserData.profile_image_url;
      } else if (user.provider == 'google') {
        user.name = user.displayName;
        user.img = user.thirdPartyUserData.picture;
      }

      $rootScope.user = user;
    };

    $rootScope.$on('$firebaseSimpleLogin:login', function(e, user) {
      if (user) {
        $rootScope.redirect(user);
      }
    });
  }
)

此代码有两个更改。首先，我们将Firebase URL移到了一个变量。其次，我们在多个服务提供商之间统一了用户对象的用户名和图像。您可以在此处下载用户图像。

接下来，我们将注销功能移到Toolbar控制器中。像这样在public/js/controllers.js更新Toolbar控制器：

controller('Toolbar', ['$rootScope', '$scope', 'Window',
  function($rootScope, $scope, Window) {
    $scope.minimize = function() {
      Window.minimize();
    };

    $scope.toggleFullscreen = function() {
      Window.toggleKioskMode();
    };

    $scope.close = function() {
      Window.close();
    };

    $scope.logoutUser = function() {
      $rootScope.user = '';
      $rootScope.authClient.$logout();
    };
  }
])

如果您现在重新运行该应用程序，请登录后，将看到logout已移至顶部。您还将在页面中心看到注销，稍后我们将进行处理。

现在，我们将在主页上工作。当用户登录vTak时，我们将向用户显示聊天室列表，并提供创建自己的聊天室的选项。我们将更新public/partials/home.html的标记，如下所示：

<div class="container" ng-controller="HomeCtrl">
  <label class="pull-right welcome-panel" ng-show="user">
    Welcome, <u>
        <span id="email">{{user.name}}</span></u>
    <img class="prof-img" ng-src="{{user.img}}" width="39" />
  </label>
  <br/>
  <h3 class="room-head">Chat Rooms
    <a href="javascript:" class="btn btn-xs btn-primary" ng-hide="isNew == true" ng-click="isNew = true; roomName = ''; ">New Room</a>
    <input ng-show="isNew == true" class="input-sm form-control cust-text" type="text" ng-model="roomName" placeholder="Room Name" />
    <a href="javascript:" ng-disabled="!roomName" ng-show="isNew == true" class="btn btn-xs btn-info" ng-click="newRoom()">Create</a>
  </h3>

  <input type="text" class="form-control" placeholder="Search Rooms" ng-model="search">
  <div class="rooms">
    <div ng-repeat="item in rooms | filter:search" class="room">
      <h3>{{item.roomname}}</h3>By : {{item.createdby}}
      <a class="btn btn-primary btn-xs pull-right join-room" href="javascript:" ng-click="joinChat($index)">Join</a>
      <a class="btn btn-danger btn-xs pull-right" ng-show="user.name == item.createdby" ng-click="deleteRoom($index)">Delete</a>

    </div>
    <div class="room" ng-show="rooms.length == 0">
      <h3>No Rooms Available. Create your own!</h3>
    </div>
  </div>

</div>

在第2行中，我们显示了用户的显示名称和个人资料图像。用户登录后，我们已经在AppCtrl收集了此信息。
在第8行上，我们提供了一个用于创建新房间的按钮。用户单击它后，我们将隐藏“创建”按钮，并显示一个文本框和“保存”按钮。用户保存房间后，它将出现在第16行填充的列表中。
在第14行，我们有一个搜索栏，用户可以在其中搜索可用的房间。
还要注意第19行。如果当前登录用户与创建会议室的用户相同，我们将显示“删除”按钮。

请注意，所有相关JavaScript代码都将在HomeCtrl进行处理。打开public/js/controllers.js并导航到最底部以找到HomeCtrl 。如下所示进行更新：

.controller('HomeCtrl', function($rootScope, $scope, $firebase, $location) {
  var ref = new Firebase($rootScope.URL + 'chatRooms');
  var sync = $firebase(ref);

  $scope.rooms = sync.$asArray();

  $scope.newRoom = function() {
    sync.$push({
      createdby: $rootScope.user.name,
      roomname: $scope.roomName,
      createddate: Date.now()
    });
    $scope.isNew = false;
  };
  $scope.deleteRoom = function(room) {
    sync.$remove($scope.rooms[room].$id);
  };

  $scope.joinChat = function(room) {
    $location.path('/chat/' + $scope.rooms[room].$id);
  };
})

第2行–我们创建了对chatRooms的新引用，并在第3行上对其进行同步。
第4行–我们查询Firebase数据存储区，并将chatRooms列出的所有房间填充为数组。
第8行–用户创建新房间时，我们使用push方法保存所需的详细信息。
第15行–用户删除房间时
第19行-当用户想要加入房间时，我们将其重定向到新路径。（ 我们将很快创建 ）

最后，添加所需的样式。打开public/css/app.css并添加以下类：

body {
  overflow-x: hidden;
}

.room-head {
  margin-top: -35px;
  border-bottom: 2px solid #CCC;
  padding: 20px 20px 8px;
}

.prof-img {
  vertical-align: bottom;
}

.welcome-panel {
  padding-right: 20px;
}

.cust-text {
  width: 22%;
  display: initial;
  vertical-align: middle;
  margin-left: 11px;
}

.rooms,.messages {
  border: 1px solid #e8e7e8;
  margin: 20px;
}

.room {
  border: 1px solid #c7c7c7;
  margin-bottom: -1px;
  background: #fff;
  -webkit-transition: background .5s;
  padding: 10px;
}

.room:hover {
  background: #e6e6e6;
}

.join-room {
  margin-left: 5px;
}

.messages {
  height: 377px;
  overflow: auto;
  border: 1px solid #e8e7e8;
}

.message {
  border-bottom: 1px solid #c7c7c7;
  background: #fff;
  height: 75px;
  -webkit-transition: background .5s;
  padding: 3px 3px 3px 10px;
}

.message img {
  vertical-align: baseline;
  margin-right: 9px;
}

.chat-input {
  position: absolute;
  bottom: 0;
  width: 93%;
  text-align: center;
  margin-bottom: 14px;
  padding-left: 8px;
}

.back-btn {
  vertical-align: bottom;
  margin-left: 20px;
}

保存所有文件，然后重新运行该应用程序。如果您上次没有注销，我们的身份验证逻辑将负责重定向到主页。您可以点击“新房间” button and create a new room 。新创建的房间将自动显示在下面的列表中。

如果要调试应用程序，可以在package.json中将toolbar和frame设置为true 。

现在我们已经创建了一个新会议室，让我们编写逻辑来加入会议室并开始与其中的所有用户聊天。为此，我们将创建一条新路线。打开public/js/app.js并添加以下路由：

$routeProvider.when('/chat/:roomid', {
  templateUrl: 'partials/chat.html',
  controller: 'ChatCtrl'
});

接下来，在public/partials文件夹中创建一个名为chat.html的新文件。该文件具有聊天视图的模板。如下所示进行更新：

<div class="container" ng-controller="ChatCtrl">
  <label class="pull-right welcome-panel" ng-show="user">
    <a href="/#/home" class="btn btn-info btn-xs back-btn">Back</a>
    Welcome, <u>
        <span id="email">{{user.name}}</span></u>
    <img class="prof-img" ng-src="{{user.img}}" width="39" />
  </label>
  <br/>

  <h3 class="room-head">Welcome to {{roomInfo.roomname}}</h3>

  <div class="messages" scroll-glue>
    <div ng-repeat="msgs in chatMessages" class="message">
      <h4>
        <img ng-src="{{msgs.userimg}}" width="20" />{{msgs.message}}
      </h4>
      <span>{{msgs.postedby}}
        <small class="text-muted">{{msgs.posteddate | date:'yyyy-MM-dd HH:mm:ss'}}</small>
      </span>
    </div>
    <div class="message" ng-show="chatMessages && chatMessages.length == 0">
      <h4>No message yet!</h4>
    </div>
  </div>
  <div class="chat-input">
    <input type="text" class="form-control" placeholder="Send Message" ng-model="message" ng-keypress="sendMessage($event)" autofocus>
  </div>

</div>

注意事项：
第12行–将保留所有消息。请注意scroll-glue指令，它将自动将聊天窗格滚动到最后一条消息。（ 我们将在稍后添加并包含此引用 ）
第26行–输入消息的输入框。

现在，从此处下载scroll-glue并将其转储到public/lib文件夹中。接下来，如下所示更新public/js/app.js模块依赖项。

var ngAuth = angular.module('ng-auth', ['ngRoute', 'ngResource', 'firebase', 'luegg.directives']).config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.when('/', {
      templateUrl: 'partials/auth.html',
      controller: 'AuthCtrl'
    });
    $routeProvider.when('/home', {
      templateUrl: 'partials/home.html',
      controller: 'HomeCtrl'
    });
    $routeProvider.when('/chat/:roomid', {
      templateUrl: 'partials/chat.html',
      controller: 'ChatCtrl'
    });
    $routeProvider.otherwise({
      redirectTo: '/'
    });
  }
]);

更新views/index.ejs以包含scrollglue.js ：

<script type="text/javascript" src="lib/scrollglue.js"></script>

在public/js/controllers.js ，我们将添加管理聊天的逻辑。将以下代码添加到所有控制器的末尾：

.controller('ChatCtrl', function($rootScope, $scope, $firebase, $routeParams) {
  // get room details
  var chatRoom = new Firebase($rootScope.URL + 'chatRooms/' + $routeParams.roomid);
  var roomSync = $firebase(chatRoom);
  $scope.roomInfo = roomSync.$asObject();

  var msgsSync = $firebase(chatRoom.child('chatMessages'));
  $scope.chatMessages = msgsSync.$asArray();

  $scope.sendMessage = function($event) {
    if (!($event.which == 13)) return;
    if ($scope.message.length == 0) return;

    msgsSync.$push({
      postedby: $rootScope.user.name,
      message: $scope.message,
      posteddate: Date.now(),
      userimg: $rootScope.user.img
    });

    $scope.message = '';
  };
});

注意事项：
第3行–我们为聊天室创建了一个新的Firebase引用
第4和5行–我们创建AngularFire引用，然后将其作为对象进行同步
第7行–我们在聊天室中创建对聊天消息对象的引用
第8行–我们同步/提取所有消息
第14行–我们将聊天消息和一些其他数据推送到服务器。

保存所有文件并运行该应用程序。现在，当您单击加入时，您应该看到我们创建的新视图。添加新消息，您可以看到聊天窗口更新。如果要测试聊天，（ 在运行vTak应用的情况下 ）打开浏览器并导航到http://localhost:3000 。与服务提供商登录，该服务提供商与您已经登录的服务提供商相同或不同，您可以与自己聊天。

简单容易！