angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例

大理一装修设计 發表於 2019-7-16 14:42:00

angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例

<h3 id="一项目简介">一、项目介绍</h3>
运用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcPop等技术实现开发的仿微信angular版聊天室angular-chatroom实例项目，实现了下拉刷新、聊天消息右键菜单、发送消息、表情(动图)，图片、视频预览，红包打赏等功能。
<h3 id="一项目简介">二、技术实现</h3>
<ul>
<li>MVVM框架：angular8.0 / @angular/cli</li>
<li>状态管理：@ngrx/store / rxjs</li>
<li>地址路由：@angular/router</li>
<li>弹窗组件：wcPop</li>
<li>打包工具：webpack 2.0</li>
<li>环境配置：node.js + cnpm</li>
<li>图片预览：previewImage</li>
<li>轮播滑动：swiper</li>
</ul>
<div class="cnblogs_code">
<pre>{
"name": "angular-chatroom",
"contact": "QQ：282310962 、 wx：xy190310",

"dependencies": {
"@angular/animations": "~8.0.1",
"@angular/common": "~8.0.1",
"@angular/compiler": "~8.0.1",
"@angular/core": "~8.0.1",
"@angular/forms": "~8.0.1",
"@angular/platform-browser": "~8.0.1",
"@angular/platform-browser-dynamic": "~8.0.1",
"@angular/router": "~8.0.1",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.3",
"@angular/compiler-cli": "~8.0.1",
"@angular/language-service": "~8.0.1",
"@ngrx/store": "^8.0.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"@types/swiper": "^4.4.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"jquery": "^2.2.3",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"swiper": "^4.5.0",
"typescript": "~3.4.3"
}
}</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142412905-1489665589.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142447475-1863793906.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142459275-1985853626.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142509425-566268077.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142515924-898971192.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142524245-751774554.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142532414-1972598761.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142544020-856448062.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142553109-636449688.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142609147-243572109.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142645178-298241915.png">
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716142658898-916627120.png">
◆ App主页面模板、app-routing路由地址配置
<div class="cnblogs_code">
<pre><div class="weChatIM__panel clearfix">
<div class="we__chatIM-wrapper flexbox flex__direction-column">
 
 <header-bar></header-bar>

 
 <div class="wcim__container flex1">
 <router-outlet></router-outlet>
 </div>

 
 <tab-bar></tab-bar>
</div>
</div></pre>
</div>
<div class="cnblogs_code">
<pre>/*
*angular/router路由配置
*/

import { NgModule } from '@angular/core'
import { Routes, RouterModule } from '@angular/router'

// 引入路由验证
import { Auth } from '../views/auth/auth'

// 引入页面组件
import { NotFoundComponent } from '../components/404'
import { LoginComponent } from '../views/auth/login'
import { RegisterComponent } from '../views/auth/register'
import { IndexComponent } from '../views/index'
import { ContactComponent } from '../views/contact'
import { UinfoComponent } from '../views/contact/uinfo'
import { UcenterComponent } from '../views/ucenter'
import { GroupChatComponent } from '../views/chat/group-chat'
import { GroupInfoComponent } from '../views/chat/group-info'
import { SingleChatComponent } from '../views/chat/single-chat'

export const routes: Routes = [
{
path: '', redirectTo: 'index', pathMatch: 'full',
data: { showHeader: true, showTabBar: true },
},

// 登录、注册
{
path: 'login', component: LoginComponent,
},
{
path: 'register', component: RegisterComponent,
},

// 首页、联系人、我
{
path: 'index', component: IndexComponent, canActivate: ,
data: { showHeader: true, showTabBar: true },
},
{
path: 'contact', component: ContactComponent, canActivate: ,
data: { showHeader: true, showTabBar: true },
},
{
path: 'contact/uinfo', component: UinfoComponent
},
{
path: 'ucenter', component: UcenterComponent, canActivate: ,
data: { showHeader: false, showTabBar: true },
},

// 聊天页面
{
path: 'chat/group-chat', component: GroupChatComponent, canActivate:
},
{
path: 'chat/single-chat', component: SingleChatComponent, canActivate:
},
{
path: 'chat/group-info', component: GroupInfoComponent, canActivate:
},

// 404
{
path: '**', component: NotFoundComponent,
},

// ...
];

@NgModule({
// imports: ,
imports: ,//开启hash模式
exports: ,
providers:
})
export class AppRoutingModule {}</pre>
</div>
◆ angular + ngrx/store页面状态管理
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716143402040-1412011262.png">
◆ angular登录、注册验证
<div class="cnblogs_code">
<pre>export class LoginComponent implements OnInit {
private formField = {
 tel: '',
 pwd: ''
}

private auth: any
constructor(
 private router: Router,
 private store: Store<{}>
) {
 let that = this
 this.store.select('auth').subscribe(v => {
 console.log(v)
 that.auth = v;
 })
}

ngOnInit(): void {
 if(this.auth.token){
 this.router.navigate(['/index'])
 }
}

handleSubmit(){
 let that = this

 if(!this.formField.tel){
 wcPop({ content: '手机号不能为空！', style: 'background:#eb5a5c;color:#fff;', time: 2 });
 }else if(!checkTel(this.formField.tel)){
 wcPop({ content: '手机号格式不正确！', style: 'background:#eb5a5c;color:#fff;', time: 2 });
 }else if(!this.formField.pwd){
 wcPop({ content: '密码不能为空！', style: 'background:#eb5a5c;color:#fff;', time: 2 });
 }else{
 this.store.dispatch(new actions.setToken(getToken(64)))
 this.store.dispatch(new actions.setUser(this.formField.tel))

 wcPop({
 content: '登录成功，跳转中...', style: 'background:#378fe7;color:#fff;', time: 2, shadeClose: false,
 end: function () {
 that.router.navigate(['/index'])
 }
 });
 }
}
}</pre>
</div>
◆ 编辑器核心消息处理
<div class="cnblogs_code">
<pre>function surrounds() {
setTimeout(function () { //chrome
 var sel = window.getSelection();
 var anchorNode = sel.anchorNode;
 if (!anchorNode) return;
 if (sel.anchorNode === $(".J__wcEditor") ||
 (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === $(".J__wcEditor"))) {

 var range = sel.getRangeAt(0);
 var p = document.createElement("p");
 range.surroundContents(p);
 range.selectNodeContents(p);
 range.insertNode(document.createElement("br")); //chrome
 sel.collapse(p, 0);

 (function clearBr() {
 var elems = [].slice.call($(".J__wcEditor").children);
 for (var i = 0, len = elems.length; i < len; i++) {
 var el = elems;
 if (el.tagName.toLowerCase() == "br") {
 $(".J__wcEditor").removeChild(el);
 }
 }
 elems.length = 0;
 })();
 }
}, 10);
}

// 定义最后光标位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {
getRange: function () {
 if (_sel && _sel.rangeCount > 0) {
 return _sel.getRangeAt(0);
 }
},
addRange: function () {
 if (_lastRange) {
 _sel.removeAllRanges();
 _sel.addRange(_lastRange);
 }
}
}

// 消息处理
function isEmpty() {
// var html = $editor.html();
var html = $(".J__wcEditor").html();
html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
html = html.replace(/<[^img].*?>/ig, "");
html = html.replace(/&nbsp;/ig, "");
return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}</pre>
</div>
<img src="https://img2018.cnblogs.com/blog/1289798/201907/1289798-20190716143958013-310223433.jpg">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/11194828.html

頁: [1]

琼殿技术论坛's Archiver

angular版聊天室|仿微信界面IM聊天|NG2+Node聊天实例