socket.io+angular.js+express.js做个聊天应用(四)「建议收藏」

socket.io+angular.js+express.js做个聊天应用(四)

大家好,又见面了,我是全栈君。

接着上一篇

使用angularjs构建聊天室的client

<!doctype html>
<html ng-app="justChatting">
<head>
    <meta charset="UTF-8">
    <title>justChatting</title>
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/stylesheets/room.css">
    <script type="text/javascript" src="/socket.io/socket.js"></script>
    <script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/bower_components/angular/angular.js"></script>
</head>
<body>
<script type="text/javascript">
   var socket=io.connect('/');
    socket.on('connected',function(){
        alert('connected to justChatting!');
    });

</script>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">justChatting</a>
        </div>
    </div>
</div>
<div class="container" style="margin-top:100px;">
    <div class="col-md-12">
        <div class="panel panel-default room" ng-controller="RoomCtrl">
            <div class="panel-heading room-header">justChatting</div>
            <div class="panel-body room-content">
                <div class="list-group messages" auto-scroll-to-bottom>
                    <div class="list-group-item message" ng-repeat="message in messages">
                        某某: {{message}}
                    </div>
                </div>
                <form class="message-creator" ng-controller="MessageCreatorCtrl">
                    <div class="form-group">
                        <textarea required class="form-control message-input" ng-model="newMessage" ctrl-enter-break-line="createMessage()" placeholder="Ctrl+Enter to quick send"></textarea>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="javascripts/node.js"></script>
</body>
</html>

改动node.js

angular.module('justChatting', [])

angular.module('justChatting').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)
                    }
                })
            })
        }
    }
})

angular.module('justChatting').directive('ctrlEnterBreakLine', function() {
    return function(scope, element, attrs) {
        var ctrlDown = false
        element.bind("keydown", function(evt) {
            if (evt.which === 17) {
                ctrlDown = true
                setTimeout(function() {
                    ctrlDown = false
                }, 1000)
            }
            if (evt.which === 13) {
                if (ctrlDown) {
                    element.val(element.val() + '\n')
                } else {
                    scope.$apply(function() {
                        scope.$eval(attrs.ctrlEnterBreakLine);
                    });
                    evt.preventDefault()
                }
            }
        });
    };
});

angular.module('justChatting').controller('MessageCreatorCtrl', function($scope, socket) {
    $scope.createMessage = function () {
        socket.emit('messages.create', $scope.newMessage)
        $scope.newMessage = ''
    }
})

angular.module('justChatting').directive('autoScrollToBottom', function() {
    return {
        link: function(scope, element, attrs) {
            scope.$watch(
                function() {
                    return element.children().length;
                },
                function() {
                    element.animate({
                        scrollTop: element.prop('scrollHeight')
                    }, 1000);
                }
            );
        }
    };
});

angular.module('justChatting').controller('RoomCtrl', function($scope, socket) {
    $scope.messages = []
    socket.on('messages.read', function (messages) {
        $scope.messages = messages
    })
    socket.on('messages.add', function (message) {
        $scope.messages.push(message)
    })
    socket.emit('messages.read')
})

一个简陋的聊天室完毕。

项目源代码地址:https://github.com/edagarli/chattingnode

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116065.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • js刷新选项卡tabs

    js刷新选项卡tabs不忘初心,方得始终!

  • python生成可执行文件linux_python运行exe程序

    python生成可执行文件linux_python运行exe程序Python生成可执行文件exe一、安装pyinstallerpipinstallpyinstaller二、使用pyinstaller命令使用示例相对路径在程序目录中,运行命令pyinstallermyscript.py则可以在当前目录生成两个文件夹dist和build,exe文件在dist文件夹中。绝对路径在程序目录中,运行命令pyinstallerC:\mys…

  • TS流批量下载工具

    TS流批量下载工具工具目录下有3个文件ffmpeg.exe:主要用来处理TS文件转为PM4文件用到,可以自行到相关网站下载http://ffmpeg.org/OnlineFilm.exe 主要执行程序FilesDownLoad.dll下载模块 新建   新建TS文件的索引文件,*.M3u8,怎么获取,参照“Ts文件说明”。M3U8文件如果是本地的文件,需要填写通用地址。…

  • MFC线程同步—— CCriticalSection类使用

    MFC线程同步—— CCriticalSection类使用多个线程访问临界区时,可以使用临界区对象。临界区对象是一个独占性共享资源,任一时刻只有一个线程可以拥有临界区。拥有临界区的线程可以访问被保护起来的资源或代码段,其他希望进入临界区的线程将被挂起等待,直到拥有临界区的线程放弃临界区时为止。CCriticalSection类的用法:方法一:(1)定义CCriticalSection类的一个全局对象(以使各个线程均能访问):

  • SAGA GIS_GOSAT卫星数据下载

    SAGA GIS_GOSAT卫星数据下载官网:SAGA-SystemforAutomatedGeoscientificAnalyseshttps://saga-gis.sourceforge.io/en/index.html点击下载按钮点击后等几秒即可下载下载时间过长

  • Pytest(6)重复运行用例pytest-repeat「建议收藏」

    Pytest(6)重复运行用例pytest-repeat「建议收藏」前言平常在做功能测试的时候,经常会遇到某个模块不稳定,偶然会出现一些bug,对于这种问题我们会针对此用例反复执行多次,最终复现出问题来。自动化运行用例时候,也会出现偶然的bug,可以针对单个用例,

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号