Wstęp
AngularJS to świetna platforma JavaScript zapewniająca proste w użyciu i szybkie wiązanie danych. Zaawansowany system dyrektyw umożliwia m.in. tworzenie niestandardowych komponentów wielokrotnego użytku. Socket.IO to kod i kod polyfill do wykorzystania w różnych przeglądarkach, który ułatwia tworzenie aplikacji działających w czasie rzeczywistym. Na szczęście te dwie metody dość dobrze ze sobą współgrają.
Pisałem już o pisaniu aplikacji w języku AngularJS za pomocą Express, ale tym razem postaram się, aby opowiedzieć o integracji Socket.IO w celu dodania do aplikacji AngularJS funkcji w czasie rzeczywistym. W tym samouczku omówimy tworzenie aplikacji do obsługi wiadomości. Jest on oparty na moim wcześniejszym samouczku (korzystanie z podobnego stosu node.js na serwerze), więc jeśli nie znasz środowiska Node.js lub Express, zapoznaj się z nim w pierwszej kolejności.
Jak zawsze, gotowy produkt możesz pobrać z GitHuba.
Wymagania wstępne
Przygotowanie i zintegrowanie Socket.IO z usługą Express wymaga przygotowania, dlatego stworzyłem Angular Socket.IO Seed.
Aby rozpocząć, sklonuj z GitHuba repozytorium angular-node-seed:
git clone git://github.com/btford/angular-socket-io-seed my-project
Po utworzeniu zasobu wyjściowego musisz uzyskać kilka zależności przy użyciu npm. Otwórz terminal w katalogu z plikiem inicjującym i uruchom polecenie:
npm install
Po zainstalowaniu tych zależności możesz uruchomić aplikację szkieletową:
node app.js
i zobacz go w przeglądarce na stronie http://localhost:3000, aby upewnić się, że materiał początkowy działa zgodnie z oczekiwaniami.
Podejmowanie decyzji dotyczących funkcji aplikacji
Istnieje więcej niż kilka sposobów na pisanie aplikacji do obsługi czatu. Opiszmy więc najrzadsze z nich. Będzie dostępny tylko jeden pokój czatu, do którego będą należeć wszyscy użytkownicy. Użytkownicy mogą wybierać i zmieniać swoją nazwę, ale nazwy muszą być niepowtarzalne. Serwer będzie wyegzekwować tę niepowtarzalność i ogłosić, gdy użytkownicy zmienią swoje nazwy. Klient powinien udostępnić listę wiadomości oraz listę użytkowników obecnie korzystających z pokoju czatu.
Prosty interfejs
Dzięki tej specyfikacji możemy stworzyć prosty interfejs w Jade, który udostępnia niezbędne elementy interfejsu. Otwórz views/index.jade i dodaj to w block body:
div(ng-controller='AppCtrl')
.col
h3 Messages
.overflowable
p(ng-repeat='message in messages') :
.col
h3 Users
.overflowable
p(ng-repeat='user in users')
.clr
form(ng-submit='sendMessage()')
| Message:
input(size='60', ng-model='message')
input(type='submit', value='Send')
.clr
h3 Change your name
p Your current user name is
form(ng-submit='changeName()')
input(ng-model='newName')
input(type='submit', value='Change Name')
Otwórz public/css/app.css i dodaj kod CSS, aby udostępnić kolumny i przepełnienia:
/* app css stylesheet */
.overflowable {
height: 240px;
overflow-y: auto;
border: 1px solid #000;
}
.overflowable p {
margin: 0;
}
/* poor man's grid system */
.col {
float: left;
width: 350px;
}
.clr {
clear: both;
}
Interakcje z Socket.IO
Chociaż Socket.IO ujawnia zmienną io w window, lepiej jest podać ją w systemie wstrzykiwania zależności AngularJS. Zaczniemy od napisania usługi, która zapakuje obiekt socket zwrócony przez Socket.IO. To świetna sprawa, bo dzięki temu znacznie łatwiej będzie później przetestować kontroler. Otwórz plik public/js/services.js i zastąp jego zawartość następującym:
app.factory('socket', function ($rootScope) {
var socket = io.connect();
return {
on: function (eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
emit: function (eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) {
callback.apply(socket, args);
}
});
})
}
};
});
Zwróć uwagę, że każde wywołanie zwrotne gniazda pakujemy poleceniem $scope.$apply. Informuje to AngularJS, że musi sprawdzić stan aplikacji i zaktualizować szablony, jeśli po przekazaniu do niej wywołania zwrotnego nastąpiła zmiana. Wewnętrznie $http działa w ten sam sposób; po powrocie niektórych XHR wywołuje metodę $scope.$apply, dzięki czemu AngularJS może odpowiednio zaktualizować swoje widoki.
Pamiętaj, że ta usługa nie pakuje całego interfejsu Socket.IO API (to tylko ćwiczenie dla czytnika ;P ). Opisuje jednak metody używane w tym samouczku i wskazuje właściwy kierunek, jeśli chcesz go rozwinąć. Być może uda mi się jeszcze raz napisać kompletny kod, ale to wykracza poza zakres tego samouczka.
Teraz za pomocą kontrolera możemy poprosić o obiekt socket, podobnie jak w przypadku $http:
function AppCtrl($scope, socket) {
/* Controller logic */
}
W kontrolerze dodajmy funkcje wysyłania i odbierania wiadomości. Otwórz plik js/public/controllers.js i zastąp zawartość tą:
function AppCtrl($scope, socket) {
// Socket listeners
// ================
socket.on('init', function (data) {
$scope.name = data.name;
$scope.users = data.users;
});
socket.on('send:message', function (message) {
$scope.messages.push(message);
});
socket.on('change:name', function (data) {
changeName(data.oldName, data.newName);
});
socket.on('user:join', function (data) {
$scope.messages.push({
user: 'chatroom',
text: 'User ' + data.name + ' has joined.'
});
$scope.users.push(data.name);
});
// add a message to the conversation when a user disconnects or leaves the room
socket.on('user:left', function (data) {
$scope.messages.push({
user: 'chatroom',
text: 'User ' + data.name + ' has left.'
});
var i, user;
for (i = 0; i < $scope.users.length; i++) {
user = $scope.users[i];
if (user === data.name) {
$scope.users.splice(i, 1);
break;
}
}
});
// Private helpers
// ===============
var changeName = function (oldName, newName) {
// rename user in list of users
var i;
for (i = 0; i < $scope.users.length; i++) {
if ($scope.users[i] === oldName) {
$scope.users[i] = newName;
}
}
$scope.messages.push({
user: 'chatroom',
text: 'User ' + oldName + ' is now known as ' + newName + '.'
});
}
// Methods published to the scope
// ==============================
$scope.changeName = function () {
socket.emit('change:name', {
name: $scope.newName
}, function (result) {
if (!result) {
alert('There was an error changing your name');
} else {
changeName($scope.name, $scope.newName);
$scope.name = $scope.newName;
$scope.newName = '';
}
});
};
$scope.sendMessage = function () {
socket.emit('send:message', {
message: $scope.message
});
// add the message to our model locally
$scope.messages.push({
user: $scope.name,
text: $scope.message
});
// clear message box
$scope.message = '';
};
}
Ta aplikacja będzie dostępna tylko w jednym widoku danych, więc możemy usunąć routing z public/js/app.js i uprościć go do:
// Declare app level module which depends on filters, and services
var app = angular.module('myApp', ['myApp.filters', 'myApp.directives']);
Zapisywanie serwera
Otwórz pokój routes/socket.js. Konieczne jest zdefiniowanie obiektu pozwalającego zachować stan serwera, aby nazwy użytkowników były niepowtarzalne.
// Keep track of which names are used so that there are no duplicates
var userNames = (function () {
var names = {};
var claim = function (name) {
if (!name || userNames[name]) {
return false;
} else {
userNames[name] = true;
return true;
}
};
// find the lowest unused "guest" name and claim it
var getGuestName = function () {
var name,
nextUserId = 1;
do {
name = 'Guest ' + nextUserId;
nextUserId += 1;
} while (!claim(name));
return name;
};
// serialize claimed names as an array
var get = function () {
var res = [];
for (user in userNames) {
res.push(user);
}
return res;
};
var free = function (name) {
if (userNames[name]) {
delete userNames[name];
}
};
return {
claim: claim,
free: free,
get: get,
getGuestName: getGuestName
};
}());
Zasadniczo definiuje on zbiór nazw, ale używa interfejsów API lepiej dopasowanych do domeny serwera czatu. Podłączmy go do gniazda serwera, aby odpowiadał na wywołania tego klienta:
// export function for listening to the socket
module.exports = function (socket) {
var name = userNames.getGuestName();
// send the new user their name and a list of users
socket.emit('init', {
name: name,
users: userNames.get()
});
// notify other clients that a new user has joined
socket.broadcast.emit('user:join', {
name: name
});
// broadcast a user's message to other users
socket.on('send:message', function (data) {
socket.broadcast.emit('send:message', {
user: name,
text: data.message
});
});
// validate a user's name change, and broadcast it on success
socket.on('change:name', function (data, fn) {
if (userNames.claim(data.name)) {
var oldName = name;
userNames.free(oldName);
name = data.name;
socket.broadcast.emit('change:name', {
oldName: oldName,
newName: name
});
fn(true);
} else {
fn(false);
}
});
// clean up when a user leaves, and broadcast it to other users
socket.on('disconnect', function () {
socket.broadcast.emit('user:left', {
name: name
});
userNames.free(name);
});
};
W związku z tym zgłoszenie powinno być już kompletne. Wypróbuj, uruchamiając polecenie node app.js. Aplikacja powinna aktualizować się w czasie rzeczywistym, dzięki Socket.IO.
Podsumowanie
Do tej aplikacji do obsługi wiadomości czatu możesz dodać dużo więcej. Możesz na przykład przesyłać puste wiadomości. Możesz użyć ng-valid, aby zapobiec takim sytuacjom po stronie klienta i sprawdzić ich działanie po stronie serwera. Serwer może zachować aktualną historię wiadomości, aby ułatwić nowym użytkownikom dołączenie do aplikacji.
Pisanie aplikacji w języku AngularJS, które korzystają z innych bibliotek, jest łatwe, gdy tylko nauczysz się, jak opakować je w usługę i powiadomić Angular o zmianie modelu. W następnej kolejności zajmę się używaniem AngularJS w połączeniu z popularną biblioteką wizualizacji – D3.js.
Odniesienia
Angular Socket.IO Seed Ukończona aplikacja do obsługi wiadomości błyskawicznych AngularJS Express Socket.IO`