AngularJS Node.js はオンライン チャット ルームを実装します_AngularJS
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
"dependencies": {
"express": "^4.13.3",
"socket.io": "^1.3.6"
}次に、ルート ディレクトリに新しい 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);//广播欢迎新用户,除新用户外都可看到
// 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");
このイベント監視では、次の 2 種類の状況を処理する必要があります。
メッセージが特定のユーザー 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标签。
<body ng-app="chatRoom" ng-controller="chatCtrl">接下来在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
有任何不妥之处或错误欢迎各位指出，不胜感激~
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7369
15
1628
14
1355
52
1266
25
1215
29
Nodeのメモリ制御に関する記事
Apr 26, 2023 pm 05:37 PM
ノンブロッキングおよびイベント駆動に基づいて構築されたノード サービスには、メモリ消費量が少ないという利点があり、大量のネットワーク リクエストの処理に非常に適しています。大量のリクエストを前提として、「メモリ制御」に関する問題を考慮する必要があります。 1. V8 のガベージ コレクション メカニズムとメモリ制限 Js はガベージ コレクション マシンによって制御されます
Node V8 エンジンのメモリと GC の詳細な図による説明
Mar 29, 2023 pm 06:02 PM
この記事では、NodeJS V8 エンジンのメモリとガベージ コレクター (GC) について詳しく説明します。
Node の File モジュールについて詳しく説明しましょう
Apr 24, 2023 pm 05:49 PM
ファイル モジュールは、ファイルの読み取り/書き込み/開く/閉じる/削除の追加など、基礎となるファイル操作をカプセル化したものです。ファイル モジュールの最大の特徴は、すべてのメソッドが **同期** と ** の 2 つのバージョンを提供することです。 asynchronous**、sync サフィックスが付いているメソッドはすべて同期メソッドであり、持たないメソッドはすべて異種メソッドです。
最適な Node.js Docker イメージを選択する方法について話しましょう。
Dec 13, 2022 pm 08:00 PM
ノード用の Docker イメージの選択は些細なことのように思えるかもしれませんが、イメージのサイズと潜在的な脆弱性は、CI/CD プロセスとセキュリティに大きな影響を与える可能性があります。では、最適な Node.js Docker イメージを選択するにはどうすればよいでしょうか?
PHPを使用して簡単なオンラインチャットルームを実装する方法
Sep 25, 2023 am 09:57 AM
PHP を使用して簡単なオンライン チャット ルームを実装する方法 はじめに: インターネットの発展に伴い、人々は他の人とコミュニケーションするためにオンライン チャット ツールにますます依存するようになりました。私たちは日常生活の中で、友人、家族、同僚とコミュニケーションをとるためにオンライン チャット ツールをよく使用します。この記事では、PHP を使用して簡単なオンライン チャット ルームを実装する方法と、具体的なコード例を紹介します。 1. データベースとテーブルの作成 まず、ローカルまたはリモートサーバー上にデータベースを作成し、その下に「chatroom」という名前のファイルを作成します。
Go 言語と Redis を使用してオンライン チャット ルームを実装する方法
Oct 27, 2023 pm 03:28 PM
Go 言語と Redis を使用してオンライン チャット ルームを実装する方法 はじめに: インターネットの急速な発展に伴い、ソーシャル ネットワークは人々の日常生活に不可欠な部分になりました。ソーシャル ネットワークの重要な部分であるオンライン チャット ルームは、その利便性、リアルタイム性、強力な双方向性により人々の間で人気があります。この記事は Go 言語と Redis に基づいており、これら 2 つのツールを使用して簡単なオンライン チャット ルームを実装する方法を紹介します。 1. Go 言語の概要: Go 言語は、最新のオペレーティング システム用のオープン ソース システム プログラミング言語です。
Node.js の GC (ガベージ コレクション) メカニズムについて話しましょう
Nov 29, 2022 pm 08:44 PM
Node.js はどのように GC (ガベージ コレクション) を行うのでしょうか?次の記事で詳しく説明します。
ノードがnpmコマンドを使用できない場合はどうすればよいですか?
Feb 08, 2023 am 10:09 AM
ノードが npm コマンドを使用できない理由は、環境変数が正しく設定されていないためです。解決策は次のとおりです: 1. 「システムのプロパティ」を開きます; 2. 「環境変数」->「システム変数」を見つけて、環境を編集します。変数; 3.nodejs フォルダーの場所を見つけます; 4.「OK」をクリックします。
