Tuesday 16 May 2017

angularjs http request to nodejs api

With NodeJs I have set up an API which works (I can see the JSON result in my Browser). In Angular I have a socket.io chat which runs via http on port 3030. I am also running an apache server (with xampp) which serves the AngularJs frontend.

As soon as I want to make a request from Angularjs to the Nodejs API I get the following error in the browsers console

XMLHttpRequest cannot load localhost:3030/api/feed. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

From what I understood after googling is that Angular can't communicate with the API as long as I dont have an HTTP server running in NodeJS. But can I run the socket.io server and the HTTP server for the api in the same process?

server.js

var express = require('express');
var app = express();
var http    = require('http').Server(app);
var io = require('socket.io')(http);

var routes  =   require('./app/api/routes');
app.use('/api', routes);

var chatMembers = {};


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

        socket.on("new-message", function(msg){
                console.log(msg);
                var username = msg[username];
                var message = msg[message];
                io.emit("receive-message", msg);
        })

        socket.on("new-connection", function(username){
                chatMembers[socket.id] = username;
                console.log(chatMembers);

                io.emit("online-list", createOnlineList());
        })

        socket.on("disconnect", function(){
                if(chatMembers[socket.id] != undefined){
                        console.log(" " + chatMembers[socket.id] + " hat die Verbindung getrennt.");
                        delete chatMembers[socket.id];
                        io.emit("online-list", createOnlineList());
                }
        })
});


function createOnlineList(){
        //returns list of every member connected to the socket (only name)
        var onlinelist = [];
        for(var index in chatMembers){
                onlinelist.push(chatMembers[index]);
        }
        return onlinelist;
}


http.listen('3030', function(){
  console.log("Server online");
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
controller.js

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
angular.module('coursemate')
    .controller("chatCtrl", ['$rootScope','$scope', '$http', function($rootScope, $scope, $http){
                var vm = this;
                var socket = window.io('localhost:3030/');
                vm.newMessage = undefined;
                vm.username = undefined;
                vm.messages = [];
                vm.onlinelist = [];
                vm.sendBtnDisabled = true;
                vm.connected = false;


                //socket acions
                socket.on("receive-message", function(msg){
                        //socket server send message to us
                        $scope.$apply(function(){
                          vm.messages.push(msg);
                        });
                });

                socket.on("online-list", function(list){
                        //server sends us refreshed list of members
                        $scope.$apply(function(){
                          vm.onlinelist = list;
                        });
                });

                socket.on('disconnect', function(){
                        //connection failed
                        vm.connected = false;
                        vm.keyEventSendMessage(null);
                });

                socket.on('connect', function(){
                        //connection established
                        vm.connected = true;
                        vm.keyEventSendMessage(null);
                });
                vm.username = undefined;



                vm.sendMessage = function(){
                        //we send messsage to socket server
                        var newMessage = {
                                username: vm.username,
                                message: vm.newMessage
                        };
                        socket.emit("new-message", newMessage);

                        var config = {
                headers : {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
                }
            }
            var data = $.param({
                user: vm.username,
                content: vm.newMessage
            });
                        $http.post('app/database/database.php?req=1', data, config).success(function(data) {
                });

                vm.newMessage = undefined;
                vm.keyEventSendMessage(null);
                };

                vm.createUser = function(username){
                        // we "log in" as users
                        vm.username = username;
                        socket.emit("new-connection", username);
                }
                vm.keyEventSendMessage = function(event){
                        //fired on keyhit at message input
                        if(typeof(vm.newMessage) != 'undefined' && vm.newMessage != null && vm.newMessage != '' && vm.connected){
                                vm.sendBtnDisabled = false;
                                if(event != null && event.keyCode == 13){
                                        vm.sendMessage();
                                }
                        }else{
                                vm.sendBtnDisabled = true;
                        }
                }

                $http.get('localhost:3030/api/feed').success(function(data) {
                        console.log(data);
                });

    }]);


via Marius

No comments:

Post a Comment