AngularJS Node.js はオンラインチャットルームを実装します

ホームページ

ウェブフロントエンド

jsチュートリアル

AngularJS Node.js はオンラインチャットルームを実装します_AngularJS

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:41 PM

angularjsnode.jsオンラインチャットルーム

AngularJS を使い始めるのは思ったよりもずっと難しいと言わざるを得ません。公式 Web サイトで提供されている PhoneCat のサンプルを読んだ後、MOOC にアクセスして Da Mo Qiongqiu の AngularJS 実践シリーズを読みました。基本的な使い方についてはまだ不明な点が多いため、理解を助けるためにオンラインチャットルームを作成することにしました。デモは→チャットルームをクリックでき、コードは→ChatRoom-AngularJSをクリックできます。

鮮明な画像をスタンプできますhttp://files.jb51.net/file_images/article/201508/201508281040051.gif

関数

開発を開始する前に、まず実装する必要がある機能を明確にします。

新しいユーザーがログインし、ブロードキャストして他のユーザーに通知します
ユーザーがオフラインになり、他のユーザーに通知するためにブロードキャストします
オンライン人数とリストを表示可能
グループチャットとプライベートメッセージが利用可能
ユーザーがグループメッセージを送信すると、ブロードキャストによって他のすべてのユーザーに通知されます
ユーザーがプライベートメッセージを送信すると、受信者インターフェースに個別に通知されます

私は美的クズなので、ブートストラップに全面的に依存していました。また、WeChat のチャット履歴にあるバブルのデザインも真似しました。

インターフェースは左側と右側の 2 つのセクションに分かれており、それぞれオンラインリストとチャットコンテンツの表示に使用されます。

左側のオンラインリストでさまざまな項目をクリックして、右側のセクションでチャットパートナーを切り替えます。

現在のチャット相手との会話記録が右側に表示されますが、表示されるのは最新の 30 件のみです。各チャットレコードの内容には、送信者のニックネームとアバター、送信時刻、メッセージの内容が含まれます。アバターについては、ここで簡単な処理を行い、ランダムな色で塗りつぶされた四角形に置き換えます。さらに、送信するメッセージのスタイルと受信するメッセージのスタイルも当然異なるように設計する必要があります。すべての効果は以下の図で確認できます。

鮮明な画像をスタンプできますhttp://files.jb51.net/file_images/article/201508/201508281040052.png

サーバー

Node.js を使用し、express と socket.io を組み合わせてサーバーを開発します。プログラムのルートディレクトリでターミナルを開き、次を実行します。

コードをコピーしますコードは次のとおりです:

npm init

プロンプトに従って、package.json ファイルを生成します。依存関係を開いて構成します:

 "dependencies": {
  "express": "^4.13.3",
  "socket.io": "^1.3.6"
 }

次に、npm install を実行して依存モジュールをインストールします。

次に、ルートディレクトリに新しい app.js を作成し、そこにサーバー側のコードを書き込みます。クライアントコードを保存するための新しいパブリックフォルダーを作成します。

app.js の主な内容は次のとおりです:

var express = require('express');
var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.use(express.static(__dirname + '/public'));


app.get('/', function (req, res) {
  res.sendfile('index.html');
});


io.on('connection',function(socket){
  socket.on('addUser',function(data){ //有新用户进入聊天室
  });

  socket.on('addMessage',function(data){ //有用户发送新消息
  });
  
  socket.on('disconnect', function () { //有用户退出聊天室
  );
});

http.listen(3002, function () {
  console.log('listening on *:3002');
});

上記のコードでは、次のイベントのリスナーを追加しました:

-addUser、新しいユーザーがチャットルームに入ります

このイベントは、クライアントがニックネームを入力することによってトリガーされます。ニックネームを受信した後、サーバーはニックネームがすでに存在するかどうかを判断し、ニックネームが無効であることをクライアントに通知します。

コードをコピーしますコードは次のとおりです:

socket.emit('userAddingResult',{result:false});

逆に、ニックネームが有効であることと現在接続しているすべてのユーザー情報をクライアントに通知し、新しいユーザー情報を他の接続ユーザーにブロードキャストします。

socket.emit('userAddingResult',{result:true});
allUsers.push(data);//allUsers保存了所有用户
socket.emit('allUser',allUsers);//将所有在线用户发给新用户
socket.broadcast.emit('userAdded',data);//广播欢迎新用户,除新用户外都可看到

「socket.emit」と「socket.broadcast.emit」の違いに注意する必要があります。次のブログ投稿

socket.io Emit のいくつかの使用法の説明

を確認してください。 >

// 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");

-addMessage、ユーザーは新しいメッセージを送信します

このイベント監視では、次の 2 種類の状況を処理する必要があります。

1. プライベートメッセージ

メッセージが特定のユーザー A に送信される場合は、A に対応するソケットインスタンスを取得し、その Emit メソッドを呼び出す必要があります。したがって、クライアントがサーバーに接続するたびに、その後の必要に備えてソケットインスタンスを保存する必要があります。

コードをコピーコードは次のとおりです:

需要发私信时，取出socket实例做操作即可：

复制代码代码如下:

connectedSockets[nickname].emit('messageAdded',data)

2.群发
群发就比较简单了，用broadcast方法即可：

复制代码代码如下:

socket.broadcast.emit('messageAdded',data);//广播消息,除原发送者外都可看到

-disconnect，有用户退出聊天室
需要做三件事情：

1.通知其他用户“某用户下线”

复制代码代码如下:

socket.broadcast.emit('userRemoved', data);

2.将用户从保存了所有用户的数组中移除

3.将其socket实例从保存了所有客户端socket实例的数组中移除

复制代码代码如下:

delete connectedSockets[nickname]; //删除对应的socket实例

运行一下服务端代码，观察有无错误：

复制代码代码如下:

node app.js

若没什么问题，继续编写客户端的代码。

客户端

在public目录下新建'index.html',客户端需要用到bootstrap、angularjs、socket.io、jQuery以及我们自己的js和css文件，先把这些文件用标签引入。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="./assets/style/app.css"/>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="//cdn.bootcss.com/angular.js/1.4.3/angular.min.js"></script>
  <script src="./assets/js/app.js"></script>
</head>
<body></body>
</html>

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

复制代码代码如下:

接下来在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'依赖，其作用后文会解释。

这样一个外层框架就搭好了，现在我们来完成内部的细节。

页面刚加载时只显示登录界面，只有当输入昵称提交后且收到服务端通知昵称有效方可跳转到聊天室。我们将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'事件，接收服务端的通知，确认是否登录成功。

socket连接监听

成功登录以后，我们还监听socket连接上的其他事件：

复制代码代码如下:

//接收到欢迎新用户消息，显示系统欢迎辞，刷新在线列表<br>
socket.on('userAdded', function(data) {});<br>
//接收到所有用户信息，初始化在线列表<br>
socket.on('allUser', function(data) {});<br>
//接收到用户退出消息，刷新在线列表<br>
socket.on('userRemoved', function(data) {});<br>
//接收到新消息，添加到聊天记录<br>
socket.on('messageAdded', function(data) {});<br>

接收到事件以后，做相应的刷新动作，这里的socket是socket.io经过包装的服务，内部仅包装了我们需要用到的两个函数on和emit。我们在事件监听里对model做的修改，都会在AngularJS内部得到通知和处理，UI才会得到及时刷新。
监听内做的事情太具体和琐碎了，这里就不列出了，接下来介绍一下message指令。

message 指令

最后分享一下我在写message指令时遇到的问题。首先看一下其代码：

app.directive('message', ['$timeout',function($timeout) {
  return {
    restrict: 'E',
    templateUrl: 'message.html',
    scope:{
      info:"=",
      self:"=",
      scrolltothis:"&"
    },
    link:function(scope, elem, attrs){
        $timeout(scope.scrolltothis);
    }
  };
}])

以及其模板message.html:

<div ng-switch on="info.type">
  <!-- 欢迎消息 -->
  <div class="system-notification" ng-switch-when="welcome">系统{{info.text}}来啦,大家不要放过他~</div>
  <!-- 退出消息 -->
  <div class="system-notification" ng-switch-when="bye">系统:byebye,{{info.text}}</div>
  <!-- 普通消息 -->
  <div class="normal-message" ng-switch-when="normal" ng-class="{others:self!==info.from,self:self===info.from}">
    <div class="name-wrapper">{{info.from}} @ {{time | date: 'HH:mm:ss' }}</div>
    <div class="content-wrapper">{{info.text}}<span class="avatar"></span></div>
  </div>
</div>

模板中我们用ng-switch指令监听info.type变量的值，根据其值的不同显示不同内容。比如，当info.type值为"welcome"时，创建第一个dom节点，删除下方另外两个div。
另外，普通消息下，为了在UI上区分自己发出去的和收到的消息，需要给他们应用不同的样式，这里用ng-class指令实现。

复制代码代码如下:

ng-class="{others:self!==info.from,self:self===info.from}"

当'self===info.from'返回true时，应用'self'类，否则，应用'others'类。
在此指令中，我们创建了独立作用域，并绑定了三个属性，绑定完后还必须在父作用域的HTML标签上添加相应属性。

scope:{
    info:"=",
    self:"=",
    scrolltothis:"&"
}

<message self="nickname" scrolltothis="scrollToBottom()" info="message" ng-repeat="message in messages"></message>

在link函数中，执行一个动作：每当一个message被加到页面上时，将聊天记录滚动到最下方，一开始我是这样写的：

复制代码代码如下:

link:function(scope, elem, attrs){ scope.scrolltothis();}

结果发生了一个很奇怪的现象，总是滚动到上一条位置，而不是最新这条。调试之后发现是因为'scrolltothis'函数执行的时候，DOM还没渲染，所以在函数内部获取scrollHeight的时候获得的总是添加DOM节点之前的状态。这时候，可以把代码放到$timeout里延迟0秒执行，延迟0秒并不意味着会立即执行，因为js的单线程特性，代码实际会等到dom渲染完再执行。

复制代码代码如下:

$timeout(scope.scrolltothis);

完整代码可以戳我的GitHub→ChatRoom-AngularJS，DEMO可以戳→chat room

有任何不妥之处或错误欢迎各位指出，不胜感激~

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Vercel是什么？怎么部署Node服务？May 07, 2022 pm 09:34 PM

Vercel是什么？本篇文章带大家了解一下Vercel，并介绍一下在Vercel中部署 Node 服务的方法，希望对大家有所帮助！

node.js gm是什么Jul 12, 2022 pm 06:28 PM

gm是基于node.js的图片处理插件，它封装了图片处理工具GraphicsMagick（GM）和ImageMagick（IM），可使用spawn的方式调用。gm插件不是node默认安装的，需执行“npm install gm -S”进行安装才可使用。

node爬取数据实例：聊聊怎么抓取小说章节May 02, 2022 am 10:00 AM

node怎么爬取数据？下面本篇文章给大家分享一个node爬虫实例，聊聊利用node抓取小说章节的方法，希望对大家有所帮助！

手把手带你使用Node.js和adb开发一个手机备份小工具Apr 14, 2022 pm 09:06 PM

本篇文章给大家分享一个Node实战，介绍一下使用Node.js和adb怎么开发一个手机备份小工具，希望对大家有所帮助！

2022年最新5款的angularjs教程从入门到精通Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

聊聊Node.js path模块中的常用工具函数Jun 08, 2022 pm 05:37 PM

本篇文章带大家聊聊Node.js中的path模块，介绍一下path的常见使用场景、执行机制，以及常用工具函数，希望对大家有所帮助！

详解node中如何安装多版本并进行切换May 27, 2022 pm 08:33 PM

本篇文章给大家深入了解一下多版本node的安装方法，并详细介绍一下node版本切换方法，希望对大家有所帮助！

node.js后台框架有哪些Jul 11, 2022 pm 06:20 PM

node后台框架有：1、Koa，一个开源的Node web框架，用Generator来实现中间件的流程控制，用try/catch来增强异常处理；2、Nest，一个用于构建高效、可扩展的Node服务器端应用程序的框架；3、Socket，是用来在客户端和服务器端之间创建实时双向通信的框架；4、Sails，是一个非常稳固的Node框架，提供建立任何规模的Web应用所需要的所有功能。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

Dreamweaver Mac版

ビジュアル Web 開発ツール

メモ帳++7.3.1

使いやすく無料のコードエディター

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。