当前位置：首页 > 资讯 > 技术文档

AngularJS+Node.js实现在线聊天室

时间：2022-12-02 03:44 编辑：来源：阅读：
扫一扫，手机访问

摘要：AngularJS+Node.js实现在线聊天室

不得不说，上手AngularJS比我想象得难多了，把官网提供的PhoneCat例子看完，又跑到慕课网把大漠穷秋的[url=http://www.imooc.com/learn/156]AngularJS实战系列[/url]看了一遍，对于基本的使用依然有很多说不清道不明的疑惑，于是决定通过做一个在线聊天室帮助理解。DEMO可以戳→[url=http://45.79.97.45:3002/]chat room[/url]，代码可以戳→[url=https://github.com/sheila1227/ChatRoom-AngularJS]ChatRoom-AngularJS[/url]。清晰图可以戳 [url=http://files.jb51.net/file_images/article/201508/201508281040051.gif]http://files.jb51.net/file_images/article/201508/201508281040051.gif[/url] [img]http://files.jb51.net/file_images/article/201508/201508281040051.gif[/img] [b]功能[/b] 着手开发之前，首先明确一下需要实现的功能：新用户登入，广播通知其他用户用户下线，广播通知其他用户可显示在线人数及列表可群聊，可私信用户若发送群消息，广播通知其他所有用户用户若发送私信，单独通知收方界面因为自己是个审美渣，所以全靠bootstrap了，另外还模仿了下微信聊天记录里的气泡设计。界面分左右两个板块，分别用于显示在线列表和聊天内容。在左侧的在线列表中，点击不同项可以切换右侧板块的聊天对象。右侧显示与当前聊天对象的对话记录，不过仅显示最近的30条。每一条聊天记录内容包括发送人的昵称及头像、发送时间、消息内容。关于头像，这里做简单处理，用填充了随机色的方块代替。另外，自己发出去的消息与收到的消息样式自然要做不同设计，所有效果可以看下图。清晰图可以戳 [url=http://files.jb51.net/file_images/article/201508/201508281040052.png]http://files.jb51.net/file_images/article/201508/201508281040052.png[/url] [img]http://files.jb51.net/file_images/article/201508/201508281040052.png[/img] 服务端服务端我们用Node.js以及混入[url=http://expressjs.com/]express[/url]、[url=http://socket.io/]socket.io[/url]来开发，在程序根目录打开终端，执行：

[url=http://blog.csdn.net/nathanhuang1220/article/details/41348213]socket.io emit的几种用法解释[/url]：

// send to current request socket client
socket.emit('message', "this is a test");
// sending to all clients except sender
socket.broadcast.emit('message', "this is a test");

[b]-addMessage，有用户发送新消息[/b] 在此事件监听里，需要分成两类情况处理： 1.私信如果消息是发给特定用户A，那么就需要获取A对应的socket实例，然后调用其emit方法。所以每当一个客户端连接到Server端时，我们得把其socket实例保存起来，以备后续之需。

[url=http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css]

我们并不立即深入逻辑细节，把框架搭好先。首先，在body上加上ng-app属性，标记一下angularjs的“管辖范围”。这个练习中我们只用到了一个控制器，同样将ng-controller属性加到body标签。

[u]复制代码[/u][/url] 代码如下:

[code]<body ng-app="chatRoom" ng-controller="chatCtrl">[/code]

接下来在js中，我们来创建module及controller。

var app=angular.module("chatRoom",[]);
app.controller("chatCtrl",['$scope','socket','randomColor',function($scope,socket,randomColor){}]);

注意这里，我们用内联注入添加了socket和randomColor服务依赖。这里我们不用推断式注入，以防部署的时候用uglify或其他工具进行了混淆，变量经过了重命名导致注入失效。在这个练习中，我们自定义了两个服务，socket和randomColor，前者是对socket.io的包装，让其事件进入angular context，后者是个可以生成随机色的服务，用来给头像指定颜色。

//socket服务
app.factory('socket', function($rootScope) {
  var socket = io(); //默认连接部署网站的服务器
  return {
    on: function(eventName, callback) {...},
    emit: function(eventName, data, callback) {...}
  };
});

//randomcolor服务
app.factory('randomColor', function($rootScope) {
  return {
    newColor: function() {
      return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);//返回一个随机色
    }
  };
});

注意socket服务中连接的语句“var socket = io();”，我们并没有传入任何url，是因为其默认连接部署这个网站的服务器。考虑到聊天记录以及在线人员列表都是一个个逻辑及结构重复的条目，且html结构较复杂，为了其复用性，我们把它们封装成两个指令：

app.directive('message', ['$timeout',function($timeout) {}])
  .directive('user', ['$timeout',function($timeout) {}]);

注意这里两个指令都注入了'$timeout'依赖，其作用后文会解释。这样一个外层框架就搭好了，现在我们来完成内部的细节。 [b]登录[/b] 页面刚加载时只显示登录界面，只有当输入昵称提交后且收到服务端通知昵称有效方可跳转到聊天室。我们将ng-show指令添加到登录界面和聊天室各自的dom节点上，来帮助我们显示或隐藏元素。用'hasLogined'的值控制是显示或隐藏。

<!-- chat room -->
<div class="chat-room-wrapper" ng-show="hasLogined">
...
</div>
<!-- end of chat room -->

<!-- login form -->
<div class="userform-wrapper" ng-show="!hasLogined">
...
</div>
<!-- end of login form -->

JS部分

 $scope.login = function() { //登录
   socket.emit("addUser", {...});
 }

 //收到登录结果
 socket.on('userAddingResult', function(data) {
   if (data.result) {
     $scope.hasLogined = true;
   } else { //昵称被占用
     $scope.hasLogined = false;
   }
 });

这里监听了socket连接上的'userAddingResult'事件，接收服务端的通知，确认是否登录成功。 [b]socket连接监听[/b] 成功登录以后，我们还监听socket连接上的其他事件：

[url=https://github.com/sheila1227/ChatRoom-AngularJS]ChatRoom-AngularJS[/url]，DEMO可以戳→[url=http://45.79.97.45:3002/]chat room[/url] 有任何不妥之处或错误欢迎各位指出，不胜感激~

全部评论(0)

上一篇：Node.js中使用socket创建私聊和公聊聊天室
下一篇：Node.js制作简单聊天室

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部