angular chat ui

chat.html

    <ion-view view-title="Chat" >
        <div class="bars bar-header " style="color:white" ng-controller="tabs">
          <div class="h1 title" >{{da.name}}  {{da.topic}}</div>

          </div>
        <ion-content class="has-header"  style="margin-bottom:30px">
      <!-- <div class="list chat"  on-scroll="onChatScroll(10)"   ng-repeat="d in messages track  by $index"  ng-if="d.message.length>0"> -->

          <ol  class="chat">

          <ol ng-scroll="onChatScroll(10)"   ng-repeat="d in messages track  by $index"  ng-if="d.message.length>0">
          <li class="other"   ng-if="!d.type && d.position" ng-click="profilmov(d)">
              <div class="avatar"><img ng-src="{{d.img}}" draggable="false"/></div>
            <div class="msg">
              <p>{{d.name}}</p>
              <p>{{d.message}} <emoji class="pizza"/></p>
            <time am-time-ago="d.time"></time>
            </div>
          </li>
          <li class="self" ng-if="!d.type && d.sender" ng-click="profilmov(d)">
              <div class="avatar"><img ng-src="{{d.img}}" draggable="false"/></div>
            <div class="msg">
              <p>  {{d.message}}</p>
              <!-- <p>Aún estoy haciendo el contexto de Góngora... <emoji class="books"/></p>
              <p>Mejor otro día</p> -->
              <time am-time-ago="d.time"></time>
            </div>
          </li>


          <li class="self" ng-if="d.type && d.sender" ng-click="profilmov(d)">
              <div class="avatar"><img ng-src="{{d.img}}" draggable="false" /></div>
            <div class="msg">
              <img src="{{d.message}}" draggable="false"/>
              <time am-time-ago="d.time"></time>
            </div>
          </li>


          <li class="other" ng-if="d.type && d.position" ng-click="profilmov(d)">
              <div class="avatar"><img id="img_ss" ng-src="{{d.img}}" draggable="false"/></div>
            <div class="msg">
              <img  src="{{d.message}}" draggable="false"/>
              <time am-time-ago="d.time"></time>
            </div>
          </li>
        </ol>
        </ol>
          <!--
          <li class="other">
              <div class="avatar"><img src="http://i.imgur.com/DY6gND0.png" draggable="false"/></div>
            <div class="msg">
              <p>Gracias! <emoji class="hearth_blue"/></p>
              <time>20:20</time>
            </div>
          </li>
              <div class="day">Hoy</div>
          <li class="self">
              <div class="avatar"><img src="http://i.imgur.com/HYcn9xO.png" draggable="false"/></div>
            <div class="msg">
              <p>Te apetece jugar a Minecraft?</p>
              <time>18:03</time>
            </div>
          </li>
          <li class="other">
              <div class="avatar"><img src="http://i.imgur.com/DY6gND0.png" draggable="false"/></div>
            <div class="msg">
              <p>Venga va, hace ya mucho que no juego...</p>
              <time>18:07</time>
            </div>
          </li>
          <li class="self">
              <div class="avatar"><img src="http://i.imgur.com/HYcn9xO.png" draggable="false"/></div>
            <div class="msg">
              <p>Ehh, me crashea el Launcher... <emoji class="cryalot"/></p>
              <time>18:08</time>
            </div>
          </li>
          <li class="other">
              <div class="avatar"><img src="http://i.imgur.com/DY6gND0.png" draggable="false"/></div>
            <div class="msg">
              <p><emoji class="lmao"/></p>
              <time>18:08</time>
            </div>
          </li>
          <li class="self">
              <div class="avatar"><img src="http://i.imgur.com/HYcn9xO.png" draggable="false"/></div>
            <div class="msg">
              <p>Es broma</p>
              <p>Ataque Moai!</p>
              <p><span><emoji class="moai"/></span><span><emoji class="moai"/></span><span><emoji class="moai"/></span><span><emoji class="moai"/></span><span><emoji class="moai"/></span><span><emoji class="moai"/></span></p>
              <time>18:09</time>
            </div>
          </li>
          <li class="other">
              <div class="avatar"><img src="http://i.imgur.com/DY6gND0.png" draggable="false"/></div>
            <div class="msg">
                <p>Copón</p>
              <p><emoji class="funny"/></p>
              <time>18:08</time>
            </div>
          </li>
          <li class="self">
              <div class="avatar"><img src="http://i.imgur.com/HYcn9xO.png" draggable="false"/></div>
            <div class="msg">
              <p>Hey there's a new update about this chat UI with more responsive elements! Check it now:</p>
              <p><a href="http://codepen.io/Varo/pen/YPmwpQ" target="parent">Chat UI 2.0</a></p>
              <time>18:09</time>
            </div>
          </li>
          </ol>
        -->

          </ion-content>
        <footer class="bar bar-footer item-input-inset">
          <a id="stuffa" class="button button-icon icon ion-android-camera" ng-click="sendim()"></a>

          <label class="item-input-wrapper " id="stuff">
            <input style="padding-left:10vw" type="text" id="message" name="message" ng-model="m.message" placeholder="Type message">
          </label>

          <a class="button button-icon icon ion-android-send" ng-click="send()"></a>
      </footer>

      </ion-view>

controller.js

 .controller('chatg',function(  $state,strayfunctions,$cordovaFile,$cordovaImagePicker,chatroomsocket,moment,$ionicPlatform,$scope,$ionicLoading,$http,getsetpasser,usermanagement,Chats,$ionicScrollDelegate){

                $scope.messages=[];
                $scope.m={
                  message:''
                }


                $scope.profilmov=function(x){
                  console.log(x);
                    getsetpasser.setid(x);
                    $state.go("profile");
                }


                  $scope.$on("$ionicView.enter", function () {
                    $http.get(Chats.url()+"open.php?id="+getsetpasser.getgroupchatid().id+"&&userid="+usermanagement.getid.id)
                    .then(function(response) {

                      // alert(response.data)
                    },function(response){
                      // $scope.datac={d:"Cant connect to server"};
                      // //$ionicLoading.hide();

                      });

                    //$ionicLoading.show();
                      $scope.messages={};
                      $scope.mes={};
                      console.log(getsetpasser.getgroupchatid());
                      $scope.da=getsetpasser.getgroupchatid();
                      console.log($scope.da);
                      //  $ionicHistory.clearCache();
                      if(!$scope.messages.length){
                        $scope.messages.length=0;
                      }

                      var di="";

                      if (getsetpasser.getgroupchatid().data) {
                        di=strayfunctions.getdtafromarray(getsetpasser.getgroupchatid().data,"idforum");
                      }

                      else {
                        di=getsetpasser.getgroupchatid().fid;
                      }

                      $http.get(Chats.url()+"chatmessage.php?id="+di+"&&position="+$scope.messages.length)
                      .then(function(response) {
                        console.log(Chats.url()+"chatmessage.php?id="+di+"&&position="+$scope.messages.length);

                        // for (var i = 0; i < response.length; i++) {
                        //   response[i].time=JSON.parse(response[i].time);
                        // }

                        $scope.shuffle={};
                        console.log(response.data);
                        // shuffle(response.data);
                        // $scope.mes=response.data;
                        console.log($scope.mes);///this is so i can give it equal numbers of object before the shuffle
                        console.log(usermanagement.getid().name)
                        for(var d=0;d<=response.data.length-1;d++){
                          $scope.mes[d]=response.data[response.data.length-d-1];
                          // console.log();
                        if (response.data[d].user+""===usermanagement.getid().name) {
                        response.data[d].sender=true;
                        } else {
                      response.data[d].position=true;
                        }
                        }

                          // response.dat=response.data.reverse();
                          $scope.messages=response.data;
                          console.log($scope.messages);
                          //$ionicLoading.hide();
                          $ionicScrollDelegate.scrollBottom();
                        // alert(response.data)
                      },function(response){
                        $scope.datac={d:"Cant connect to server"};
                        //$ionicLoading.hide();

                        });
                  });


                    chatroomsocket.emit('adduser',{id:usermanagement.getid().id,room:getsetpasser.getgroupchatid().id});///added user to the room



                  $scope.onChatScroll = ionic.debounce(function(top) {
                      if ($ionicScrollDelegate.getScrollPosition().top <= top) {
                        $scope.loadMore();
                      }
                    }, 500);


                $scope.loadMore=function(){
                  // alert(1);
                }

                ////now i handle user receivemessage
                chatroomsocket.on('updatechat',function(data){
                  // alert(data.message);
                  console.log($scope.messages);
                  var add={message:data.message,
                  time:data.time};

                      if (data.type) {
                        add.type=data.type;
                      }

                  if(data.id===usermanagement.getid().id){
                    add.sender=true;
                  }
                  else {
                      add.position=true;
                  }
                  $scope.$apply(function () {

                    $scope.messages=$scope.messages.concat(add);

                  });
                    $ionicScrollDelegate.scrollBottom();
                  })

                  $scope.send=function(){
                    var f={time:new Date(),
                      message:$scope.m.message,
                      id:usermanagement.getid().id,

                    };
                    console.log(f);
                      // console.log(Chats.url()+"postmessage.php?id="+usermanagement.getid().id+"&&name="+usermanagement.getid().name+"&&forumid="+getsetpasser.getgroupchatid().id+"&&message="+$scope.m.message);
                    // $scope.messages=  $scope.messages.concat($scope.f);
                    if ($scope.m.message.length>0) {
                      chatroomsocket.emit('chatgroupmessage',f);
                      // alert(f.time);
                      // alert(JSON.stringify(f.time));
                      $http.get(Chats.url()+"postmessage.php?id="+usermanagement.getid().id+"&&name="+usermanagement.getid().name+"&&forumid="+getsetpasser.getgroupchatid().fid+"&&message="+$scope.m.message+"&&time="+f.time)
                    .then(function(response) {
                      console.log(response);
                    },function(response){
                      $scope.datac={d:"Cant connect to server"};
                      console.log(response);

                      });
                    }

                      $scope.m.message="";
                      $ionicScrollDelegate.scrollBottom();
                  }




                  // $scope.post=

                  $scope.sendim=function(){

                            // Image picker will load images according to these settings
                        var options = {
                            maximumImagesCount: 1, // Max number of selected images, I'm using only one for this example
                            width: 800,
                            height: 800,
                            quality: 80            // Higher is better
                        };

                        $cordovaImagePicker.getPictures(options).then(function (results) {
                                    // Loop through acquired images
                            for (var i = 0; i < results.length; i++) {
                                alert('Image URI: ' + results[i]);   // Print image URI

                                var fileName, path;

                                fileName = results[i].replace(/^.*[\\\/]/, '');


                                    if ($ionicPlatform.is("android")) {
                                      path = cordova.file.cacheDirectory
                                    } else {
                                      path = cordova.file.tempDirectory
                                    }


                                $cordovaFile.readAsArrayBuffer(path, fileName).then(function (success) {
                                // success - get blob data
                                var imageBlob = new Blob([success], { type: "image/jpeg" });
                                console.log(imageBlob);
                                saveToFirebase2(imageBlob,fileName);


                                  // var elem = document.getElementById('im_');
                                  //  // Note: Use window.URL.revokeObjectURL when finished with image.
                                  //  elem.src = URL.createObjectURL(imageBlob);
                                  // save__(imgsrc_,imageBlob);///save to php database
                                  // var imghomsrc_=  savetofil(fileName);////save to file in phon
                                  // savtolocal(imghomsrc_);///saveTolocalstorag


                                  },function(error) {
                              console.log(error);
                              });

                            }
                        }, function(error) {
                            // alert('Error: ' + JSON.stringify(error));    // In case of error
                        });

                  }


                  function saveToFirebase2(_imageBlob, _filename) {

                  // return $q(function (resolve, reject) {
                    // Create a root reference to the firebase storage

                    var storageRef = firebase.storage().ref();

                    // pass in the _filename, and save the _imageBlob
                    var uploadTask = storageRef.child('images/' + _filename).put(_imageBlob);

                    // Register three observers:
                    // 1. 'state_changed' observer, called any time the state changes
                    // 2. Error observer, called on failure
                    // 3. Completion observer, called on successful completion
                    uploadTask.on('state_changed', function (snapshot) {
                      // Observe state change events such as progress, pause, and resume
                      // See below for more detail
                    }, function (error) {
                      // Handle unsuccessful uploads, alert with error message
                      // alert(error.message)
                      reject(error)
                    }, function () {
                      // Handle successful uploads on complete
                      var downloadURL = uploadTask.snapshot.downloadURL;
                      // alert(downloadURL);
                      // when done, pass back information on the saved image

                        var f={time:new Date(),
                          message:downloadURL,
                          type:'img',
                          id:usermanagement.getid().id,

                        };
                        chatroomsocket.emit("chatgroupmessage",f);
                        console.log(f);
                          // console.log(Chats.url()+"postmessage.php?id="+usermanagement.getid().id+"&&name="+usermanagement.getid().name+"&&forumid="+getsetpasser.getgroupchatid().id+"&&message="+$scope.m.message);
                        // $scope.messages=  $scope.messages.concat($scope.f);
                        var d=downloadURL;
                        var a=d.replace('&','~');
                        var a=a.replace('%2F','|');

                        $http.get(Chats.url()+"postmessage.php?id="+usermanagement.getid().id+"&&name="+usermanagement.getid().name+"&&forumid="+getsetpasser.getgroupchatid().id+"&&message="+a+"&&time="+f.time+"&&type=img")
                        .then(function(response) {
                          console.log(response);

                        },function(response){
                          $scope.datac={d:"Cant connect to server"};
                          console.log(response);

                          });
                          $scope.m.message="";
                          $ionicScrollDelegate.scrollBottom();
                      console.log(uploadTask);


                      // resolve(uploadTask.snapshot)
                    });
                  // });
                }

                })

node.js

            const cors=require('cors');

            const socketIO = require('socket.io');

            const path = require('path');
            var express = require('express');
            const PORT = process.env.PORT || 3100;
            const INDEX = path.join(__dirname, 'index.html');

            var FCM = require('fcm-push');

            var MongoClient = require('mongodb').MongoClient;
            var assert = require('assert');
            // var url = 'mongodb://127.0.0.1:27017/nemo';
            var url = 'mongodb://nemo:nemo@ds145868.mlab.com:45868/nemo_1';

            var serverKey = 'AAAAHx_cRY4:APA91bF7YkfrOYdlLxfdqkXQYuPHbPIl9atoIUQiADJerkFTeyh0bvy8Rle5MiI_hH4b6AG3ukLillmqqhWIxZETw-BYib7UlSONeO5C-39PFrVWrBkI-huFMFGisZnAQZT2xfjzxC8eo5ankUDEj2ac4wHC6QYaYQ';
            var fcm = new FCM(serverKey);
            var mysql      = require('mysql');
            var d=1;
            'use strict';

            const server = express().use(cors()).
            get('/register/:userId', function (req, res) {


            clients[req.params.userId].push=req.params.pushid;////just replace it if it was their or put a new one if it wasnt
              console.log(d);
              console.log(req.params);
              d=d + 1;
            })
              .use((req, res) => res.sendFile(INDEX) )
              .listen(PORT, () => console.log(`Listening on ${ PORT }`));

            const io = socketIO(server);

            // usernames which are currently connected to the chat
            var usernames = {};

            // rooms which are currently available in chat


            io.sockets.on('connection', function (socket) {

            	// when the client emits 'adduser', this listens and executes
            	socket.on('adduser', function(data){
                console.log(data);
            		// store the username in the socket session for this client
            		socket.username = data.id;
            		// store the room name in the socket session for this client
            		socket.room = data.room;
            		// add the client's username to the global list
            		usernames[data.id] = data.id;
            		// send client to room
            		socket.join(data.room);
            		// echo to client they've connected
            		socket.emit('updatechat', {data:'connected'});
            		// echo to room 1 that a person has connected to their room
            		socket.broadcast.to('room1').emit('updatechat', {data:data.username+' just joined',type:'alert'});
            		// socket.emit('updaterooms', rooms, 'room1');
                console.log( data.username+" user added ");

                // old(socket,);
            	});

            	// when the client emits 'sendchat', this listens and executes
            	socket.on('chatgroupmessage', function (data) {
                console.log(data);
                console.log("sending to "+data.id);
            		// we tell the client to execute 'updatechat' with 2 parameters
            		io.sockets.in(socket.room).emit('updatechat', data);
            	});

            	// socket.on('switchRoom', function(newroom){
            	// 	// leave the current room (stored in session)
            	// 	socket.leave(socket.room);
            	// 	// join new room, received as function parameter
            	// 	socket.join(newroom);
            	// 	socket.emit('updatechat', 'SERVER', 'you have connected to '+ newroom);
            	// 	// sent message to OLD room
            	// 	socket.broadcast.to(socket.room).emit('updatechat', 'SERVER', socket.username+' has left this room');
            	// 	// update socket session room title
            	// 	socket.room = newroom;
            	// 	socket.broadcast.to(newroom).emit('updatechat', 'SERVER', socket.username+' has joined this room');
            	// 	socket.emit('updaterooms', rooms, newroom);
            	// });

            	// when the user disconnects.. perform this
            	socket.on('disconnect', function(){
            		// remove the username from global usernames list
            		delete usernames[socket.username];
            		// update list of users in chat, client-side
            		io.sockets.emit('updateusers', usernames);
            		// echo globally that this client has left
            		socket.broadcast.emit('updatechat', 'SERVER', socket.username + ' has disconnected');
            		socket.leave(socket.room);
            	});
            });




            var check =function(x){
              MongoClient.connect(url, function(err, db){
                var collection = db.collection('chatrooms');
                collection.find({id:x.id.id,chatid:x.chatid}).toArray(function(err, docs){
                  if (!docs.length>0) {
                    var collectio = db.collection('chatrooms');
                    collectio.insertMany([
                    x
                    ], function(err, result) {
                    callback(result);
                    });
                  }
                  db.close();
                });
              });
            }

            // var old=function(socket,id){
            //   MongoClient.connect(url, function(err, db){
            //     var collection = db.collection('chatrooms');
            //     collection.find({chatid:x.chatid}).toArray(function(err, docs){
            //       if (!docs.length>0) {
            //         socket.emit('old',docs;
            //       db.close();
            //     });
            //   });
            // }

package.json

{
  "name": "node-js-getting-started",
  "version": "0.2.5",
  "description": "A sample Node.js app using Express 4",
  "engines": {
    "node": "5.9.1"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "ejs": "2.4.1",
    "express": "4.13.3",
    "cors":"latest",
    "socket.io":"latest",
    "mysql":"latest",
    "fcm-push":"latest",
      "mongodb":"latest",
        "assert":"latest"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/heroku/node-js-getting-started"
  },
  "keywords": [
    "node",
    "heroku",
    "express"
  ],
  "license": "MIT"
}

service.js

.factory('chatroomsocket', ['$rootScope', function($rootScope) {
        var url="https://big-cucumber-830291.herokuapp.com";
        // var url="http://localhost:3100";
        var socket = io.connect(url);
        console.log("connecting");
        return {
          on: function(eventName, callback){
            socket.on(eventName, callback);
          },
          emit: function(eventName, data) {
            socket.emit(eventName, data);
          }
//           },
//           ioo:function(){
//             console.log(socket);
//             return socket;
//           }
        };
      }])