Использование Socket.IO и Cordova для создания приложения для чата в реальном времени

• LocalStorageModule : позволяет нам использовать локальное хранилище.
• btford.socket-io : позволяет нам использовать socket.io.
• angularMoment : позволяет нам использовать moment.js.

 angular.module('starter', ['ionic', 'LocalStorageModule', 'btford.socket-io', 'angularMoment']) 

Добавление маршрутов

Еще в js / app.js добавьте конфигурацию для различных состояний с помощью метода config . Это позволяет нам указать различные страницы, URL-адрес, по которому они могут быть доступны, и шаблон HTML, который будет отображаться при доступе к этим страницам.

Состояние login возвращает страницу входа, состояние rooms возвращает список комнат, в которые пользователь может присоединиться, а состояние room возвращает страницу чата. Страница login — это страница по умолчанию, которая будет отображаться, если ни одно из других состояний не активно.

 .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('login', { url: '/login', templateUrl: 'templates/login.html' }) .state('rooms', { url: '/rooms', templateUrl: 'templates/rooms.html' }) .state('room', { url: '/room', templateUrl: 'templates/room.html' }); // if none of the above states are matched, use this as the fallback $urlRouterProvider.otherwise('/login'); }) 

Домашний контроллер

Затем создайте Home Controller в js / controllers / HomeController.js . Он обрабатывает все взаимодействия пользовательского интерфейса и данные, используемые на странице входа в систему и комнаты.

Внутри контроллера мы внедряем следующие сервисы:

• $scope : используется для присоединения данных или функций к текущей странице.
• $state : используется для перенаправления в другое состояние.
• localStorageService : используется для сохранения и получения данных из локального хранилища.
• SocketService : используется для отправки данных через веб-сокеты.

 (function(){ angular.module('starter') .controller('HomeController', ['$scope', '$state', 'localStorageService', 'SocketService', HomeController]); function HomeController($scope, $state, localStorageService, SocketService){ var me = this; me.current_room = localStorageService.get('room'); me.rooms = ['Coding', 'Art', 'Writing', 'Travel', 'Business', 'Photography']; $scope.login = function(username){ localStorageService.set('username', username); $state.go('rooms'); }; $scope.enterRoom = function(room_name){ me.current_room = room_name; localStorageService.set('room', room_name); var room = { 'room_name': room_name }; SocketService.emit('join:room', room); $state.go('room'); }; } })(); 

Разбивая этот код, сначала мы получим название текущей комнаты, если она есть.

 me.current_room = localStorageService.get('room'); 

Комнаты жестко запрограммированы в массиве. Это будет использовано в шаблоне комнат позже.

 me.rooms = ['Coding', 'Art', 'Writing', 'Travel', 'Business', 'Photography']; 

Присоедините функцию login в login к текущей области. Эта функция будет вызываться, когда пользователь нажимает кнопку входа в систему. Имя username будет передано этой функции и сохранено в локальном хранилище. Затем перенаправляем в состояние room .

 $scope.login = function(username){ localStorageService.set('username', username); $state.go('rooms'); }; 

Как только пользователь будет перенаправлен в состояние rooms , он увидит список комнат, в каждом из которых enterRoom функция enterRoom . Функция выполняется всякий раз, когда пользователь нажимает на комнату, имя комнаты передается в качестве аргумента, используемого для установки current_room и сохраняется в локальном хранилище. Событие join:room отправляется через сокет, который содержит объект, представляющий текущую комнату. Наконец, мы перенаправляем в состояние room .

 $scope.enterRoom = function(room_name){ me.current_room = room_name; localStorageService.set('room', room_name); var room = { 'room_name': room_name }; SocketService.emit('join:room', room); $state.go('room'); }; 

SocketService.emit() позволяют нам отправлять данные через сокет. Это означает, что данные отправляются на сервер socket.io (созданный позже) в режиме реального времени.

Шаблон входа

Создайте шаблон входа ( templates / login.html ), который является страницей приложения по умолчанию. Это позволяет пользователю вводить свое имя пользователя и нажимать кнопку входа для входа. При этом используется HomeController , добавляя его в качестве значения атрибута ng-controller и используя home_ctrl в качестве псевдонима для HomeController . Когда нажимается кнопка входа в систему, мы вызываем функцию login присоединенную к области ранее в контроллере. Это принимает текущее значение, введенное в имени пользователя в качестве аргумента.

 <ion-view title="Login" ng-controller="HomeController as home_ctrl"> <header class="bar bar-header bar-positive"> <h1 class="title">Login</h1> </header> <ion-content class="has-header padding"> <div class="list"> <label class="item item-input"> <input type="text" ng-model="home_ctrl.username" placeholder="User name"> </label> <div class="padding"> <button class="button button-positive button-block" ng-click="login(home_ctrl.username)">Enter</button> </div> </div> </ion-content> </ion-view> 

Шаблон номера

Затем создайте шаблон комнаты в templates / rooms.html . Это страница, на которую пользователь перенаправляется после входа в систему. Здесь перечислены все комнаты, предоставленные HomeController ранее. Директива ng-repeat позволяет нам перебирать все комнаты, а директива ng-click позволяет нам выполнять функцию enterRoom по щелчку пользователя.

 <ion-view title="Rooms" ng-controller="HomeController as home_ctrl"> <header class="bar bar-header bar-positive"> <h1 class="title">Rooms</h1> </header> <ion-content class="has-header padding"> <div class="card" ng-repeat="room in home_ctrl.rooms"> <div class="item item-text-wrap text-center" ng-click="enterRoom(room)"> <strong>{{room}}</strong> </div> </div> </ion-content> </ion-view> 

SocketService

Затем создайте js / services / SocketService.js , который мы используем для подключения к серверу socket.io с помощью SocketService() . Этот сервис использует socketFactory предоставляемый angular-socket-io. Здесь вы можете видеть, что мы подключаемся к порту 3000 localhost. Если вы планируете развернуть приложение чата позже, вы должны изменить http: // localhost: 3000 на доступный в Интернете URL. В целях разработки вы можете использовать ngrok для предоставления локального URL-адреса в Интернете.

 (function(){ angular.module('starter') .service('SocketService', ['socketFactory', SocketService]); function SocketService(socketFactory){ return socketFactory({ ioSocket: io.connect('http://localhost:3000') }); } })(); 

Комнатный контроллер

Создайте комнатный контроллер в js / services / RoomController.js, который обрабатывает все события, происходящие в комнате чата. В этом контроллере мы $ionicScrollDelegate два новых сервиса, moment и $ionicScrollDelegate . moment позволяет нам использовать библиотеку moment.js, чтобы получить текущую метку времени при отправке сообщения. Это позволяет нам форматировать отметку времени в удобном для человека формате (например, 4 секунды назад). $ionicScrollDelegate автоматически прокручивает приложение каждый раз, когда новое сообщение $ionicScrollDelegate в массив. Таким образом, пользователь всегда видит самое последнее сообщение.

 (function(){ angular.module('starter') .controller('RoomController', ['$scope', '$state', 'localStorageService', 'SocketService', 'moment', '$ionicScrollDelegate', RoomController]); function RoomController($scope, $state, localStorageService, SocketService, moment, $ionicScrollDelegate){ var me = this; me.messages = []; $scope.humanize = function(timestamp){ return moment(timestamp).fromNow(); }; me.current_room = localStorageService.get('room'); var current_user = localStorageService.get('username'); $scope.isNotCurrentUser = function(user){ if(current_user != user){ return 'not-current-user'; } return 'current-user'; }; $scope.sendTextMessage = function(){ var msg = { 'room': me.current_room, 'user': current_user, 'text': me.message, 'time': moment() }; me.messages.push(msg); $ionicScrollDelegate.scrollBottom(); me.message = ''; SocketService.emit('send:message', msg); }; $scope.leaveRoom = function(){ var msg = { 'user': current_user, 'room': me.current_room, 'time': moment() }; SocketService.emit('leave:room', msg); $state.go('rooms'); }; SocketService.on('message', function(msg){ me.messages.push(msg); $ionicScrollDelegate.scrollBottom(); }); } })(); 

 me.messages = []; 

 $scope.humanize = function(timestamp){ return moment(timestamp).fromNow(); }; 

 me.current_room = localStorageService.get('room'); 

 var current_user = localStorageService.get('username'); 

 $scope.isNotCurrentUser = function(user){ if(current_user != user){ return 'not-current-user'; } return 'current-user'; }; 

 $scope.sendTextMessage = function(){ var msg = { 'room': me.current_room, 'user': current_user, 'text': me.message }; me.messages.push(msg); $ionicScrollDelegate.scrollBottom(); me.message = ''; SocketService.emit('send:message', msg); }; 

 $scope.leaveRoom = function(){ var msg = { user: current_user, room: me.current_room }; SocketService.emit('leave:room', msg); }; 

 SocketService.on('message', function(msg){ me.messages.push(msg); $ionicScrollDelegate.scrollBottom(); }); 

 <ion-view title="{{ room_ctrl.current_room }}" ng-controller="RoomController as room_ctrl"> <header class="bar bar-header bar-positive"> <h1 class="title">{{ room_ctrl.current_room }}</h1> <button class="button button-assertive" ng-click="leaveRoom()">Leave</button> </header> <ion-content class="has-header padding"> <div class="list" ng-if="room_ctrl.messages.length > 0"> <li class="item item-text-wrap no-border {{ isNotCurrentUser(msg.user) }}" ng-repeat="msg in room_ctrl.messages"> <div class="msg"> <div class="details padding"> <p> <div class="user">{{ msg.user }}</div> <div class="message">{{ msg.text }}</div> </p> <small>{{ humanize(msg.time) }}</small> </div> </div> </li> </div> <div class="card" ng-if="!room_ctrl.messages.length"> <div class="item item-text-wrap"> No messages yet. </div> </div> </ion-content> <footer class="bar bar-footer bar-positive item-input-inset"> <label class="item-input-wrapper"> <input type="text" id="message" name="message" ng-model="room_ctrl.message" placeholder="Type message"> </label> <a class="button button-icon icon ion-android-send" ng-click="sendTextMessage()"></a> </footer> </ion-view> 

 <div class="list" ng-if="room_ctrl.messages.length > 0"> <li class="item item-text-wrap no-border {{ isNotCurrentUser(msg.user) }}" ng-repeat="msg in room_ctrl.messages"> <div class="msg"> <div class="details padding"> <p> <div class="user">{{ msg.user }}</div> <div class="message">{{ msg.text }}</div> </p> <small>{{ humanize(msg.time) }}</small> </div> </div> </li> </div> 

 <div class="card" ng-if="!room_ctrl.messages.length"> <div class="item item-text-wrap"> No messages yet. </div> </div> 

 <footer class="bar bar-footer bar-positive item-input-inset"> <label class="item-input-wrapper"> <input type="text" id="message" name="message" ng-model="room_ctrl.message" placeholder="Type message"> </label> <a class="button button-icon icon ion-android-send" ng-click="sendTextMessage()"></a> </footer> 

 ion-content { margin-bottom: 50px !important; } .no-border { border: none; } .user { font-weight: bold; } .current-user { float: left; clear: both; } .not-current-user { float: right; clear: both; } .current-user .details { background-color: #72CBFF; } .not-current-user .details { background-color: #DCDCDC; } 

 { "name": "cordova-chatapp", "version": "0.0.1", "dependencies": { "socket.io": "^1.3.7" } } 

 var io = require('socket.io')(3000); io.on('connection', function(socket){ socket.on('join:room', function(data){ var room_name = data.room_name; socket.join(room_name); }); socket.on('leave:room', function(msg){ msg.text = msg.user + " has left the room"; socket.in(msg.room).emit('exit', msg); socket.leave(msg.room); }); socket.on('send:message', function(msg){ socket.in(msg.room).emit('message', msg); }); }); 

 var io = require('socket.io')(3000); 

 io.on('connection', function(socket){ ... }); 

 socket.on('join:room', function(data){ var room_name = data.room_name; socket.join(room_name); console.log('someone joined room ' + room_name + ' ' + socket.id); }); 

 socket.on('leave:room', function(msg){ msg.text = msg.user + " has left the room"; socket.in(msg.room).emit('exit', msg); socket.leave(msg.room); }); 

 socket.on('send:message', function(msg){ socket.in(msg.room).emit('message', msg); }); 

 node chat-server.js 

 ionic serve