如何使用 Express、AngularJS、Socket.io 广播和获取通知？

Question

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

app.js（节点服务器文件）

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

一些客户端架构的东西：

在大多数情况下，在 angular 客户端，最好将套接字连接移至服务。并在服务初始化时建立连接（服务是单例的，因此启动时会有一个连接）并将此服务注入您的控制器。
创建一些父抽象控制器可能很方便所有套接字侦听器，因此无论 angular 控制器是否处于活动状态，所有侦听器都在监视。当父控制器从套接字获取数据时，它可以将其广播给子控制器

在您的注释代码中：

    //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 用户应该发送他朋友的 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，因为这意味着目标用户从接收方客户端获取接收方的 ID。这可能是不安全的（用户可以更改他的 ID 并发送其他 ID）。我更喜欢在服务器端创建 id，当用户 A 向用户 B 发送通知时，我从服务器变量中获取用户 A id。

有一段时间我创建了聊天应用程序的简单原型（angular 和 express），我在这里提到了一些事情。我你的应用程序仍然有问题去那里检查我的代码： https://github.com/uhlryk/chat-prototype

如何使用 Express、AngularJS、Socket.io 广播和获取通知？

How to broadcast and get notification using Express, AngularJS, Socket.io?

javascript

node.js

express

socket.io

angularjs

一些客户端架构的东西：

后端：