angular版聊天室

一、项目介绍

运用angular+angular-cli+angular-router+ngrx/store+rxjs+webpack+node+wcpop等技术实现开发的仿微信angular版聊天室angular-chatroom实例项目，实现了下拉刷新、聊天消息右键菜单、发送消息、表情(动图)，图片、视频预览，红包打赏等功能。

二、技术实现

{  "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-browr": "~8干女生.0.1",    "@angular/platform-browr-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-rvice": "~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"  }}

◆ app主页面模板、app-routing路由地址配置

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

/* *  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: [auth],    data: { showheader: true, showtabbar: true },  },  {    path: 'contact', component: contactcomponent, canactivate: [auth],    data: { showheader: true, showtabbar: true },  },  {    path: 'contact/uinfo', component: uinfocomponent  },  {    path: 'ucenter', component: ucentercomponent, canactivate: [auth],    data: { showheader: fal, showtabbar: true },  },  // 聊天页面  {    path: 'chat/group-chat', component: groupchatcomponent, canactivate: [auth]  },  {    path: 'chat/single-chat', component: singlechatcomponent, canactivate: [auth]  },  {    path: 'chat/group-info', component: groupinfocomponent, canactivate: [auth]  },  // 404  {    path: '**', component: notfoundcomponent,  },  // ...];@ngmodule({  // imports: [routermodule.forroot(routes)],  imports: [routermodule.forroot(routes, { uhash: true })],  //开启hash模式  exports: [routermodule],  providers: [auth]})export class approutingmodule {}

◆ angular + ngrx/store页面状态管理

◆ angular登录、注册验证

export class logincomponent implements oninit {    private formfield = {        tel: '',        pwd: ''    }        private auth: any    constructor(        private router: router,        private store: store<{}>    ) {        let that = this        this.store.lect('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 });        }el if(!checktel(this.formfield.tel)){            wcpop({ content: '手机号格式不正确！', style: 'background:#eb5a5c;color:#fff;', time: 2 });        }el if(!this.formfield.pwd){            wcpop({ content: '密码不能为空！', style: 'background:#eb5a5c;color:#fff;', time: 2 });        }el{            this.store.dispatch(new actions.ttoken(gettoken(64)))         不可思议的舅妈   this.store.dispatch(new actions.tur(this.formfield.tel))            wcpop({                content: '登录成功，跳转中...', style: 'background:#378fe7;color:#fff;', time: 2, shadeclo: fal,                end: function () {                    that.router.navigate(['/index'])                }            });        }    }}

◆ 编辑器核心消息处理

function surrounds() {    ttimeout(function () { //chrome        var l = window.getlection();        var anchornode = l.anchornode;        if (!anchornode) return;        if (l.anchornode === $(".j__wceditor")[0] ||            (l.anchornode.nodetype === 3 && l.anchornode.parentnode === $(".j__wceditor")[0])) {            var range = l.getrangeat(0);            var p = document.createelement("p");            range.surroundcontents(p);            range.lectnodecontents(p);            range.inrtnode(document.createelement("br")); //chrome            l.collap(p, 0);            (function clearbr() {                var elems = [].slice.call($(".j__wceditor")[0].children);                for (var i = 0, len = elems.length; i < len; i++) {                    var el = elems[i];                    if (el.tagname.tolowerca() == "br") {                        $(".j__wceditor")[0].removechild(el);                    }                }                elems.length = 0;            })();        }    }, 10);}// 定义最后光标位置var _lastrange = null, _l = window.getlection && window.getlection();var _rng = {    getrange: function () {        if (_l && _l.rangecount > 0) {     浙江高考成绩       return _l.getrangeat(0);        }    },    addrange: function () {        if (_鲁达当和尚打一个成语lastrange) {            _l.removeallranges();            _l.addrange(_lastrange);        }    }}// 消息处理function impty() {    // 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, "") == "";}