Last active
August 29, 2015 13:56
-
-
Save TheRusskiy/8843429 to your computer and use it in GitHub Desktop.
Socket.io with AngularJS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict'; | |
angular.module('chatApp') | |
.controller 'ChatCtrl', ($scope, Socket)-> | |
socket = Socket($scope) | |
socket.emit 'subscribe', {} | |
$scope.messages = [ ] | |
socket.on 'message_history', (messages)-> | |
$scope.messages = messages | |
socket.on 'user_list', (users)-> | |
$scope.users = users | |
socket.on 'message_created', (msg)-> | |
$scope.messages.push msg | |
socket.on 'message_deleted', (msg)-> | |
removeFromArray($scope.messages, msg) | |
$scope.deleteMessage = (msg)-> | |
socket.emit 'delete_message', {id: msg._id} | |
$scope.submitMessage = (form)-> | |
if form.$valid | |
socket.emit 'create_message', {text: $scope.currentMessage} | |
$scope.currentMessage = "" |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict" | |
angular.module("chatApp").controller "LoginCtrl", ($scope, Auth, $location, Socket) -> | |
$scope.user = {} | |
$scope.errors = {} | |
$scope.login = (user) -> | |
Auth.login( | |
nickname: user.nickname | |
password: user.password | |
).then ()-> | |
# Logged in, redirect to home | |
Socket.reconnect() | |
$location.path "/" | |
.catch (err)-> | |
err = err.data; | |
$scope.errors.other = err.message; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
"use strict" | |
angular.module("chatApp").factory "Socket", ($rootScope) -> | |
# io is a global object available if you included socket.io script: | |
socket = io.connect() | |
### | |
$scope - scope of a controller | |
global - boolean indicating whether a change applies only | |
to a local scope or to a $rootScope | |
(in case perfomansc is an issues) | |
### | |
resultObject = ($scope, global = true)-> | |
scopeOfChange = if global then $rootScope else $scope | |
# create an array of listeners if there is none (notice '?' operator): | |
$scope._listeners?= [] | |
# if controller's scope is destroyed then $destroy event is fired | |
# on this event we should get rid of all listeners on this scope: | |
$scope.$on '$destroy', (event)-> | |
for lis in $scope._listeners | |
socket.removeListener(lis.eventName, lis.ngCallback) | |
$scope._listeners.length=0 | |
# return familiar to us socket.io object that can listen to and emit events: | |
return { | |
on: (eventName, callback) -> | |
ngCallback = ()-> | |
args = arguments | |
# trigger angular $digest cycle on selected scope: | |
scopeOfChange.$apply -> | |
callback.apply socket, args # apply function to original object | |
# save listener to a list on current scope so we can remove it later: | |
$scope._listeners.push { | |
eventName | |
ngCallback | |
} | |
# pass our own callback that wraps the one passed by a user | |
socket.on eventName, ngCallback | |
emit: (eventName, data, callback) -> | |
socket.emit eventName, data, -> | |
args = arguments | |
scopeOfChange.$apply -> | |
callback.apply socket, args if callback | |
} | |
# sometimes I find reconnect to be usefull: | |
resultObject.reconnect = ()-> | |
socket.socket.disconnect() | |
socket.socket.connect() | |
return resultObject |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment