angular即時聊天IM實例|仿微信聊天室Angular版

angular8+angular/cli+angular/router+ngrx+webpack+node實現的仿微信界面聊天室|仿微信手機端聊天|angular聊天實戰開發

技術實現

• MVVM框架：angular8.0 / @angular/cli
• 狀態管理：@ngrx/store / rxjs
• 地址路由：@angular/router
• 彈窗組件：wcPop
• 打包工具：webpack 2.0
• 環境配置：node.js + cnpm
• 圖片預覽：previewImage
• 輪播滑動：swiper

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'])                }            });        }    }}複製代碼

/* * angular路由守衛（驗證token） */
import { Router, CanActivate } from '@angular/router'
declare var wcPop: any;
export class Auth implements CanActivate{    constructor(private router: Router){}
    canActivate(){        let that = this        // 驗證token const token: boolean = window.sessionStorage.getItem('token') ? true : false
        if(!token){            // 未登陸受權 /* wcPop({ content: '還未登陸受權！', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2, end: function () { that.router.navigate(['/login']); } }); */ that.router.navigate(['/login']); } return token }}複製代碼

/* * angular主模塊配置 */ 
import { BrowserModule } from '@angular/platform-browser'import { NgModule } from '@angular/core'import { FormsModule } from '@angular/forms'import { AppRoutingModule } from './app-routing.module'
// 引入狀態管理import { StoreModule } from '@ngrx/store'import { reducer } from '../ngrx'
// 載入公共組件（component）import { HeaderComponent } from '../components/header'import { TabBarComponent } from '../components/tabbar'import { XtnScroll } from '../components/xtnScroll/Scroll'import { NotFoundComponent } from '../components/404'// 載入頁面組件（view）import { AppComponent } from './app.component'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'
@NgModule({  declarations: [    // 公共組件 HeaderComponent, TabBarComponent, XtnScroll, NotFoundComponent,
    // 頁面組件 AppComponent, LoginComponent, RegisterComponent, IndexComponent, ContactComponent, UinfoComponent, UcenterComponent, GroupChatComponent, GroupInfoComponent, SingleChatComponent, ], imports: [ BrowserModule, AppRoutingModule, FormsModule,
    StoreModule.forRoot(reducer)  ],  providers: [],  bootstrap: [AppComponent]})export class AppModule { }複製代碼

function surrounds() {
    setTimeout(function () { //chrome
        var sel = window.getSelection();
        var anchorNode = sel.anchorNode;
        if (!anchorNode) return;
        if (sel.anchorNode === $(".J__wcEditor")[0] ||
            (sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === $(".J__wcEditor")[0])) {

            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")[0].children);
                for (var i = 0, len = elems.length; i < len; i++) {
                    var el = elems[i];
                    if (el.tagName.toLowerCase() == "br") {
                        $(".J__wcEditor")[0].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, "") == "";
}
複製代碼