javascript - 如何使用 Express、AngularJS、Socket.io 进行广播并获取通知？

Question

我正在尝试制作通知系统。为了演示这一点，用户 1 向用户 2 发送好友请求。我使用的是express.js、angularjs 和 socket.io。单击按钮 User1 发送请求。在 User2 的一端，有一个套接字，on() 正在监听好友请求事件。但是当我广播时，其他用户无法收到任何消息。

app.js( Node 服务器文件)

var express = require('express'),
    app = express();

var port = process.env.PORT || 3000;

var io = require('socket.io').listen(app.listen(port));

require('./config')(app,io);
require('./routes')(app,io);

config.js

// This file handles the configuration of the app.
// It is required by app.js

var express = require('express');

module.exports = function(app, io){

    // Set .html as the default template extension
    app.set('view engine', 'html');

    // Initialize the ejs template engine
    app.engine('html', require('ejs').renderFile);

    // Tell express where it can find the templates
    app.set('views', __dirname + '/views');

    // Make the files in the public folder available to the world
    app.use(express.static(__dirname + '/public'));

};

routes.js(从此文件发出好友请求)

var gravatar = require('gravatar');
var mysql = require('mysql');
// This is needed if the app is run on heroku:
var connection = mysql.createConnection({
    host : "localhost",
    user : "root",
    password : "",
    database : "two_way_demo"
});

connection.connect(function(error){
    if(error)
    {
        console.log("Problem with MySQL"+error);
    }
    else {
        console.log("Connected with Database");
    }
});

module.exports = function(app,io){
    app.get('/',function(req,res){
        res.render('index');
    });

    app.get('/create', function(req,res){

        // Generate unique id for the room
        var id = Math.round((Math.random() * 1000000));

        // Redirect to the random room
        res.redirect('/chat/'+id);
    });

    app.get('/home/:id', function(req,res){

        // Render the chant.html view
        res.render('home');
    });

    // Initialize a new socket.io application, named 'chat'
    var chat = io.on('connection', function (socket) {
        socket.on('get-user-id',function(data){

            connection.query("SELECT * from user_info WHERE email='"+data.userEmail+"'",function(err,rows){
                if(err)
                {
                    console.log("Problem with MySQL"+err);
                }
                else
                {
                    //console.log(rows);
                    JSON.stringify(rows);
                    socket.emit('user-id',rows);
                }
            });
        });
        socket.on('send-request',function(data){
            console.log(data);
*********************************************************************
             // Tried the emit here but its not working
                //io.emit('friend request', {
                //    receiverid: data.receiverid
                //});
*********************************************************************
        });

    });
}

angular-code.js( Angular 代码文件)

$(function () {
    var app = angular.module("notificationApp", []);

    app.controller("chatCTRL", ["$scope", "$http", "$interval", function ($scope, $http, $interval) {
        // connect to the socket

        //var socket = io();
        //socket.on('connect', function () {
        //    io.on('friend request', function (data) {
        //        alert("here")
        //    });
        //});

        $scope.senderId = Number(window.location.pathname.match(/(\d+)$/)[1]);

        $scope.sendrequest = function (senderid, receiverid) {

            var socket = io();
            socket.on('connect', function () {
                socket.emit('send-request', {
                    senderid: senderid,
                    receiverid : receiverid
                });
            });
        }
    }]);

    app.controller("loginCTRL", ["$scope", "$http", "$interval", "$window", function ($scope, $http, $interval, $window) {
        $scope.sendLogin = function () {
            var socket = io();
            socket.on('connect', function () {
                socket.emit('get-user-id', {
                    userEmail: $scope.hisEmail
                });
            });
            socket.on('connect', function () {
                socket.on('user-id', function (data) {
                    $scope.UserId = data[0].user_id;
                    $window.location = "http://localhost:3000/home/" + $scope.UserId;
                });
            });
        }
    }]);
}());

home.html

<!DOCTYPE html>
<html ng-app="notificationApp">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body ng-controller="chatCTRL">
<h1>welcome</h1>
    <div id="createbutton">
        <div id="little"><button ng-click="sendrequest(senderId,6)">Send Friend Request to User#6</button></div>
    </div>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="../angular/angular.js"></script>
<script src="../angular/common_angular.js"></script>

</body>
</html>

Answer 1

一些客户端架构的事情:

1. 在大多数情况下，在 Angular 客户端，最好将套接字连接移至服务。并在服务初始化时建立连接(服务是单例的，因此启动时将有一个连接)并将该服务注入(inject) Controller 中。
2. 创建一些父抽象 Controller 可能会很方便所有套接字监听器，因此无论 Angular Controller 是否处于事件状态，所有监听器都在观看。当父 Controller 从套接字获取数据时，它可以将其广播给子 Controller

在您的注释代码中，您有:

    //var socket = io();
    //socket.on('connect', function () {
    //    io.on('friend request', function (data) {
    //        alert("here")
    //    });
    //});

将其更改为以下内容(如果您在服务中进行连接，则应省略连接部分):

    var socket = io();
    socket.on('connect', function () {
      socket.on('friend request', function (data) {
        alert("here")
      });
    });

后端:

在您的注释代码中，您有:

//io.emit('friend request', {
//    receiverid: data.receiverid
//});

您应该使用 var chat = io.on('connection', function (socket) {... 中的 socket 来发出，而不是 io.emit

创建数组变量，在连接部分之前存储所有带有用户 ID 的套接字:

var socketList = [];
var chat = io.on('connection', function (socket) {
  socketList.push({id:someId,socket:socket})
  ...
}

现在在send-request中，用户应该发送他 friend 的ID(我们必须知道应该通知哪个用户 - 当然我们可以通知所有人):

socket.on('send-request',function(data){
  socketList.forEach(function(soc){
    if(soc.id === someId){
      soc.socket.emit('friend request', {
        receiverid: data.receiverid
      })
    }
});

另外，我不喜欢这部分receiverid: data.receiverid，因为这意味着 taget 用户从接收者客户端获取接收者的 ID。这可能不安全(用户可以更改他的 ID 并发送其他 ID)。我更喜欢在服务器端创建 id，当用户 A 向用户 B 发送通知时，我从服务器变量中获取用户 A id。

有一段时间，我创建了聊天应用程序的简单原型(prototype)(Angular 和 Express)，我在这里提到了一些事情。如果您的应用程序仍然存在问题，请前往那里检查我的代码: https://github.com/uhlryk/chat-prototype