Last active
May 17, 2017 10:30
-
-
Save laterbreh/3c367f66fdea0a66b5f2 to your computer and use it in GitHub Desktop.
Basic ping pong with angular and sockets. This uses an express backend to communicate the emit events.
This file contains 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'; | |
| // Declare app level module which depends on views, and components | |
| angular.module('myApp', [ | |
| 'ngRoute', | |
| 'myApp.view1', | |
| 'myApp.view2', | |
| 'myApp.version', | |
| 'btford.socket-io' | |
| ]). | |
| config(['$routeProvider', function($routeProvider) { | |
| $routeProvider.otherwise({redirectTo: '/view1'}); | |
| }]); |
This file contains 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
| <!DOCTYPE html> | |
| <!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> | |
| <!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]--> | |
| <!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>My AngularJS App</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css"> | |
| <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css"> | |
| <link rel="stylesheet" href="app.css"> | |
| <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script> | |
| </head> | |
| <body> | |
| <ul class="menu"> | |
| <li><a href="#/view1">view1</a></li> | |
| <li><a href="#/view2">view2</a></li> | |
| </ul> | |
| <!--[if lt IE 7]> | |
| <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> | |
| <![endif]--> | |
| <div ng-view></div> | |
| <div>Angular seed app: v<span app-version></span></div> | |
| <!-- In production use: | |
| <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> | |
| --> | |
| <script src="http://localhost:3000/socket.io/socket.io.js"></script> | |
| <script src="bower_components/angular/angular.js"></script> | |
| <script src="bower_components/angular-route/angular-route.js"></script> | |
| <script src="bower_components/angular-socket-io/socket.js"></script> | |
| <script src="app.js"></script> | |
| <script src="view1/view1.js"></script> | |
| <script src="view2/view2.js"></script> | |
| <script src="components/version/version.js"></script> | |
| <script src="components/version/version-directive.js"></script> | |
| <script src="components/version/interpolate-filter.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| ////////////NOTICE/////////////////////////////////////////// | |
| //This file is in the express backend that talks to angular... | |
| ////////////NOTICE/////////////////////////////////////////// | |
| var express = require('express'); | |
| var router = express.Router(); | |
| /* GET home page. */ | |
| router.get('/', function(req, res, next) { | |
| res.send('Welcome to the ping pong server'); | |
| }); | |
| module.exports = function (io) { | |
| //Socket.IO | |
| io.on('connection', function (socket) { | |
| console.log('User has connected to socketio port'); | |
| socket.emit('pong', 'Socket.io successfully deployed.. you are about to receive a pong!'); | |
| //ON Events | |
| socket.on('ping', function () { | |
| console.log('Ping... sending Pong!'); | |
| socket.emit('pong', 'PONG!!'); | |
| }); | |
| //End ON Events | |
| }); | |
| return router; | |
| }; |
This file contains 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
| <p>This is the partial for view 1.</p> | |
| <p>{{test}}</p> |
This file contains 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('myApp.view1', ['ngRoute']) | |
| .config(['$routeProvider', function($routeProvider) { | |
| $routeProvider.when('/view1', { | |
| templateUrl: 'view1/view1.html', | |
| controller: 'View1Ctrl' | |
| }); | |
| }]). | |
| factory('socket', function ($rootScope) { | |
| var socket = io.connect('http://localhost:3000'); | |
| 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); | |
| } | |
| }); | |
| }) | |
| } | |
| }; | |
| }). | |
| controller('View1Ctrl', function($scope, socket) { | |
| var init = function(){ | |
| socket.emit('ping'); | |
| console.log('Emit Ping'); | |
| }; | |
| socket.on('pong', function(data){ | |
| $scope.test = data; | |
| console.log('Received Pong!'); | |
| }); | |
| setTimeout(function(){ | |
| init(); | |
| }, 2000); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment