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

Posted 2023-03-07

【中文标题】如何使用 Express、AngularJS、Socket.io 广播和获取通知？

【英文标题】：How to broadcast and get notification using Express, AngularJS, Socket.io?

【发布时间】：2016-01-27 07:40:01

【问题描述】：

我正在尝试制作通知系统。为了证明这一点，用户 1 正在向用户 2 发送好友请求。我正在使用 express.js、angularjs 和 socket.io。点击按钮 User1 发送请求。在 User2 结束时，有一个 socket,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（角度代码文件）

$(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>

【问题讨论】：

@Nutty...嗨，我想在我的 meanjs 应用程序中进行好友请求...。我尝试了很多方法，我搜索了很多链接以找到确切的解决方案，但这对我们没有用...所以你能帮助我们吗？...我怎样才能在我的应用程序中编写代码来做朋友请求....请帮助我们，谢谢，如果你有 plunker，请提供以了解确切的结构和解决方案以及......尽快恢复......谢谢......

【参考方案1】：

一些客户端架构的东西：

在大多数情况下，在 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，因为这意味着tget 用户从接收器客户端获取接收器的ID。这可能是不安全的（用户可以更改他的 id 并发送一些其他 id）。我更喜欢在服务器端创建 id，当用户 A 向用户 B 发送通知时，我从服务器变量中获取用户 A id。

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

【讨论】：

...嗨，我想在我的 meanjs 应用程序中进行好友请求...。我尝试了很多方法，我搜索了很多链接以找到确切的解决方案，但这对我们没有用.. .所以你能帮我们吗？...我怎样才能在我的应用程序中编写代码来做朋友请求....请帮助我们，谢谢，如果你有 plunker，请提供以了解确切的结构和解决方案.....尽快恢复......谢谢......

嗨。 *** 的理念是与广大受众分享知识。我不确定我是否可以帮助你，也许是其他人。请创建单独的问题，很可能有人回答。您也可以在我的评论下方粘贴此问题的链接，我会尽力回答。