个人中心
gpt4 book ai didi

angularjs - Angularjs 中的 Socket.io

转载 作者：太空宇宙 更新时间：2023-11-03 22:29:10 25 4
gpt4 key购买 nike

我将使用 socket.io 在我的 Angular/nodejs 应用程序中添加一些 websockets 功能。

最终目的是在服务器上保留一个“实时”数组，无法用于编写文档(因为其他人正在编辑它们)。但我从 socket.io 聊天示例开始，很快就陷入困境。我确信我在这里遗漏了一些微不足道的东西。$scope.sendMessage() 不会发出任何内容..

前面

html

 <input type="text" class="form-control" placeholder="message" name="message" ng-model="message"> <button type="button" ng-click="sendMessage()"> sendMessage </button>

socket.io 封装在服务中

app.factory('socket', function ($rootScope) {
    var socket = io.connect();
    return {
        on: function (eventName, callback) {
            socket.on(eventName, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function (eventName, data, callback) {
            socket.emit(eventName, data, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            })
        }
    };
});

Controller 

$scope.messages=[]
socket.on('init', function (data) {
});
socket.on('send:message', function (message) {
    console.log("send:message")
    $scope.messages.push(message);
});
$scope.sendMessage = function () {
    console.log("send:message")
    socket.emit('send:message',$scope.message);
    $scope.messages.push($scope.message);
};

服务器

var http = require('http');
var server = http.createServer(app);
var io = require('socket.io')(server);
io.on('connection', function (socket) {
  console.log('a user connected');
  socket.on('disconnect', function () {
    console.log('user disconnected');
  });

  socket.on('send:message', function (message) {
    console.log('send:message:'+message);
    socket.broadcast.emit('send:message', {
      text:message
    });
  });
});

最佳答案

我使用这个堆栈创建了一个小应用程序。看看我的项目 here 。我用过this为 AngularJs 制作的 socket-io 包装器，发现它非常容易使用!

本质上，在我的项目中我有以下内容:

NodeJs Server code (入口点):

class Server {
    constructor() {
        this.express = require('express');
        this.redis = require('redis');
        this.client = this.redis.createClient(); //creates a new client
        this.app = this.express();
        this.server = require('http').Server(this.app);
        this.io = require('socket.io').listen(this.server);
        this.app.use('/node_modules', this.express.static(__dirname + '/node_modules'));
        this.app.use('/static', this.express.static(__dirname + '/static'));
        this.app.get('/', (req, res) => {
            res.sendFile(__dirname+'/index.html');
        });

        this.server.listen(8081, '0.0.0.0', () => { // Listens to port 80
            console.log('Listening on ' + this.server.address().port);
        });
        this.setup();
    }

    setup() {
        this.io.on("connection", (socket) => {
            this.socket = socket;
            this.centralServer();
        });
    }
    ...
    ...
}

And then, in index.html ，我已经加载了所需库的 JS:

<html lang="en">
<head>
   ...
   ...
    <script src="/node_modules/socket.io-client/dist/socket.io.js" type="text/javascript"></script>
    <script src="/node_modules/redis/index.js" type="text/javascript"></script>
    <script src="/node_modules/angular-socket-io/socket.min.js" type="text/javascript"></script>
    <script src="/static/js/main.js" type="text/javascript"></script>
    ...
    ...
</head>
<body ng-app="app">
    <div ng-include='"static/views/<mainDOM>.html"'></div>
</body>

And finally, in my Angular app ，我有以下内容:

var app = angular.module("app", ['btford.socket-io']);
app.controller('myGame', ['$scope', 'socketFactory', function($scope, socketFactory) {
    class Player {
        constructor() {
            this.dom          = $scope;
            this.dom.Room     = {};
            this.socket       = socketFactory();
            this.dom.roomExists   = false;
            this.setup();
        }
    ...
    ...
    }
    $scope.player = new Player();
}

我认为我在这个项目中做得很好，提供了 AngularJS + Socket-io 的最小示例。

关于angularjs - Angularjs 中的 Socket.io，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40198398/

25 4 0
文章推荐： c# - 使用带有构建器模式的流畅界面
文章推荐： html - 为什么在 Bootstrap 中边界类的颜色属性有一个重要的覆盖？
文章推荐： c# - 无法从 Web API 中的删除方法获取参数
文章推荐： css - Bootstrap 4 模态未显示
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com