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)


相关推荐

  • wincc远程服务器配置,WINCC-OPC服务器配置

    wincc远程服务器配置,WINCC-OPC服务器配置《WINCC-OPC服务器配置》由会员分享,可在线阅读,更多相关《WINCC-OPC服务器配置(13页珍藏版)》请在人人文库网上搜索。1、两台WinCC之间OPC通讯方法(WinXP)OPC客户端1、登陆计算机名及密码要与服务器端(OPCServer)一致。a)如:用户名:administrator密码:12342、OPC客户端要与服务器端处于同一个网络。a)如:OPCServerIP:…

  • 常微分方程初值问题数值解法MATLAB(泛函微分方程)

    Matlab解常微分方程的初值问题题目:Matlab解常微分方程的初值问题设计目的:1、熟练掌握Matlab的基本编程方法,及其编程风格。2、熟练掌握Matlab常用函数的使用。3、与本专业相关知识相结合,掌握其在程序开发中的应用方法以及和word、C语言等接口方法。4、通过计算机数值求解的方式来加深微分方程解的理解。5、熟悉初等方法可获得解析解之外的数值近似解的求解方法,提高对差分格式的认识…

  • MYSQL和SQL的区别

    MYSQL和SQL的区别什么是SQL?SQL是一种用于操作数据库的语言。SQL是用于所有数据库的基本语言。不同数据库之间存在较小的语法更改,但基本的SQL语法基本保持不变。SQL是StructuredQueryLanguage的简短缩写。根据ANSI(美国国家标准协会),SQL是操作关系数据库管理系统的标准语言。SQL用于访问,更新和操作数据库中的数据。它的设计允许管理RDBMS中的数据,例如MYSQL。SQL语言还用于控制数据访问以及数据库模式的创建和修改。什么是MYSQL?MySQL是在90年代中期开发的,是

  • SpringBatch概述

    SpringBatch概述1、SpringBatch简介1.1、简介根据Spring官网描述,SpringBatch是一个轻量级的、完善的批处理应用框架,旨在支持企业系统建立健壮、高效的批处理应用。然而SpringBatch不是一个调度框架,它只关注于任务的处理,如日志监控、事务、并发问题等,但是它可以与其它调度框架一起联合使用,完成相应的调度任务,如Quartz、Tivoli、Control-M等。Sprin…

  • mysqlnavicat连接不上_navicat打开连接报错

    mysqlnavicat连接不上_navicat打开连接报错前提,解压版MySQL问题描述,Navicat可以连接远程数据库,但是连接本地数据库时报10038解决方式,百度说,查看服务是否启动,但是打开我的服务根本就没有看到MySQL字样。我的解决方式是,用系统管理员启动cmd.exe,然后运行mysqldinstallMySQL,提示服务提示成功后,执行netstartmysql重新启动MySQL。再Navicat连接本地连接,连接成…

    2022年10月13日
  • 全局低级键盘钩子[通俗易懂]

    全局低级键盘钩子[通俗易懂]/*========================================================================文件:kbevent.h说明:全局消息钩子时间:2005-03-20编写:oshj||oshj@21cn.c

发表回复

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

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