接着上一篇

使用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

socket.io+angular.js+express.js做个聊天应用(四)的更多相关文章

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

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...

  2. soket.io.js + angular.js + express.js(node.js)

    soket.io.js + angular.js + express.js(node.js) 今天搭建个soket.io.js + angular.js + express.js的环境, 采坑无数,特 ...

  3. Angular JS + Express JS入门搭建网站

    3月份开始,接到了新的任务,跟UI开发有关,用的是Angular JS,Express JS等技术.于是周末顺便学习下新技术. 组里产品UI架构如下: 其中前端,主要使用Angular JS框架,另外 ...

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

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27585321 接着上一篇 我用的开发工具 ...

  5. 【socket.io研究】3.手机网页间聊天核心问题

    前面我们已经说了服务器相关的一些内容,且又根据官网给出的一个例子写了一个可以聊天的小程序,但是这还远远不够呀,这只能算是应用前的准备工作.接下来,一起来考虑完善一个小的聊天程序吧. 首先,修改服务器的 ...

  6. Vue3 + Socket.io + Knex + TypeScript 实现可以私聊的聊天室

    前言 下文只在介绍实现的核心代码,没有涉及到具体的实现细节,如果感兴趣可以往下看,在文章最后贴上了仓库地址.项目采用前后端模式,前端使用 Vite + Vue3 + TS:后端使用 Knex + Ex ...

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

    node,express开发环境等安装如果已经搞好了. justhacker@justhacker-ThinkPad-Edge-E440:~/projects/nodejs$ express -e c ...

  8. 基于 Sequelize.js + Express.js 开发一套 Web 后端服务器

    什么是 Sequelize 我们知道 Web 应用开发中的 Web 后端开发一般都是 Java.Python.ASP.NET 等语言.十年前,Node.js 的出现使得原本仅限于运行在浏览器中的 Ja ...

  9. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

随机推荐

  1. HtmlAgilityPack --解析Html源码

    最近项目需要从网络上抓取一下数据解析Html源码,奈何正则表达式难写,于是网上搜索找到了“ HtmlAgilityPack”类库,敏捷开发,果然效率非同寻常. 在此做笔记,写下心得,顺便给自己总结一下 ...

  2. centos7源以及相关的一些命令

    yum makecache:将服务器上的软件包信息在本地缓存,以提高 搜索安装软件的速度. yum update:更新所有的rpm包 yum upgrade:大规模的版本升级,与yum update不 ...

  3. HDU 2087 剪花布条（模式串在主串中出现的次数主串中子串不可重叠）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2087 题意:求模式串在主串中出现的次数,与模式串匹配的子串之间不可重叠. 思路:用kmp算法解决,在匹 ...

  4. BZOJ 1601: [Usaco2008 Oct]灌水( MST )

    MST , kruskal 直接跑 ---------------------------------------------------------------------- #include< ...

  5. CentOS修改IP

    编辑 /etc/sysconfig/network-scripts/ifcfg-eth0 然后 service network restart DEVICE=eth0BOOTPROTO=noneNM_ ...

  6. Qt之界面美化输入框（使用QSS确实非同凡响）

    我们先看下酷狗音乐的输入框效果图: 这里我们需要实现在输入框里面添加一个按钮(多个也一样),并且提供一个默认时候的文字..直接上代码好了. QHBoxLayout *lay = new QHBoxLa ...

  7. C#使用WinAPI 修改电源设置，临时禁止笔记本合上盖子时睡眠

    原文 http://www.cnblogs.com/h46incon/archive/2013/09/03/3299138.html 在 阻止系统自动睡眠的小软件,附C#制作过程 ,弄了一个防止系统睡 ...

  8. HDU 2962 Trucking

    题目大意:给定无向图,每一条路上都有限重,求能到达目的地的最大限重,同时算出其最短路. 题解:由于有限重,所以二分检索,将二分的值代入最短路中,不断保存和更新即可. #include <cstd ...

  9. JAVA的IO学习

    IO 有具体的分类: 有具体的分类:1:根据处理的数类型不同:字节流和字符流.2:根据流向不同:输入流和输出流. =============(补充字节跟字符概念区分)================= ...

  10. 【Linux操作系统分析】设备驱动处理流程

    1 驱动程序,操作系统,文件系统和应用程序之间的关系 字符设备和块设备映射到操作系统中的文件系统,由文件系统向上提供给应用程序统一的接口用以访问设备. Linux把设备视为文件,称为设备文件,通过对设 ...