011-云E办_在线聊天入口（遇到的问题Syntax Error: TypeError: thisgetIptions is not a function）

一、github上的聊天功能

将GitHub上的开源项目与自身项目进行整合来实现即时聊天功能

简介

一个基于Vue + Webpack构建的简单chat示例，聊天记录保存在localStorge。简单演示了Vue的 component、filter、directive、computed以及组件间的事件通讯。 原项目目前存在一个Bug：打开项目关闭浏览器再次打开会报错。这里使用在此项目基础上重构的项目 来与我们项目进行整合.

下载（用chrom打开下载）

地址：

https://github.com/is-liyiwei/vue-Chat-demo

我刚开始用win11自带的ie打开，发现并不能打开。我就用cmd下的ping github.com 我看数据包并没有丢失，返回延时也挺快。
然后我就用chrome打开，一下就打开了。

运行测试：

用管理员打开cmd，到达下载好的目录下，运行：

# install dependencies 
npm install
# serve with hot reload at localhost:8080 
npm run dev
# build for production with minification
 npm run build

二、整合项目

将下载下来的项目所在的文件，加入到本项目中。

• assets：是网页所需要的图片，这个不需要，因为后端提供了图片，更改代码直接从后端获取。
• componts：在自己的目录下创建该目录下的几个文件，复制过去。
• vuex：是stroy，将其中的的代码，加入到本项目的story/index.js
• main.js：就是一个普通的入口，不需要加入项目当汇总。

1、遇到的Bug：

安装 sass-loader 和 node-sass 的报错。

Syntax Error: TypeError: thisgetIptions is not a function

检查代码中并无写错的地方
其实涉及到这个问题，就是版本原因了，我安装的 scss-loader 版本太高，卸载安装低版本即可

npm uninstall --save sass-loader // 卸载
npm i -D sass-loader@8.x // 安装
npm uninstall --save node-sass // 卸载
npm i node-sass@4.14.1 // 安装
// 如果node-sass安装失败，也可以直接在package.json中写上版本号，删除node_modules文件夹，重新npm i即可

2、出现：python错误时，安装一下python

2、具体代码分析：

1、在Home页面添加，在线聊天的标志：

Home.vue 定义好图标，跳转到路由。

<!-- 在线聊天系统 -->
 <el-button icon="el-icon-bell"
	  type="text"
	  size="normal"
	  style="margin-right: 8px;color: black"
	  @click="goChat">
</el-button>

methods: {
/* 在线聊天的功能，去路由里面找名字为'chat' 跳转*/
       goChat() {
           this.$router.push('/chat');
       },
}

2、路由:router/index.js 在路由中找到下一个页面

import FriendChat from "../views/chat/FriendChat";
const routes = [
    {
        path: '/',
        name: 'Login',
        component: Login,
        hidden:true
    },
    {
        path: '/home',
        name: 'Home',
        component: Home,
        children:[
            {
                path: '/chat',
                name: '在线聊天',
                component: FriendChat,
            }
        ]
    }
]

3、views/chat/FriendChat.vue

通过路由的’chat’ --> FriendChat来到此地

<template>
    <div id="app">
		 <!--seidebar: 左侧的侧边栏
		 card:头像个人信息
		 list:用户列表
		-->
        <div class="sidebar">
            <card></card>
            <list></list>
        </div> 
		<!-- mian
		 main：右边整体内容
		 message：发送的聊天信息的内容
		 usertext：是输入框
		 -->
        <div class="main">
            <message></message>
            <usertext></usertext>
        </div>
    </div> 
</template>

<script>
    import card from '../../components/chat/card'
    import list from '../../components/chat/list'
    import message from '../../components/chat/message'
    import usertext from '../../components/chat/usertext'
 
    export default {
        name: 'FriendChat',
        data () {
            return {

            }
        },
         mounted:function() {
            this.$store.dispatch('initData');
        }, 
        components:{
            card,
            list,
            message,
            usertext
        }
    }
</script>

<style lang="scss" scoped>
    #app {
        margin: 20px auto;
        width: 800px;
        height: 600px;
        overflow: hidden;
        border-radius: 10px;
        .sidebar, .main {
            height: 100%;
        }
        .sidebar {
            float: left;
            color: #f4f4f4;
            background-color: #2e3238;
            width: 200px;
        }
        .main {
            position: relative;
            overflow: hidden;
            background-color: #eee;
        }
    }
</style> 

4、添加components/chat/下的代码：

4、添加story/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import {getRequest} from "../utils/api";
import SockJS from 'sockjs-client'
import Stomp from 'stompjs'
import {Notification} from 'element-ui';

Vue.use(Vuex);

const now = new Date();

const store = new Vuex.Store({
    state: {
        routes: [],
        sessions: {},
        admins: [],
        currentAdmin: JSON.parse(window.sessionStorage.getItem('user')),
        currentSession: null,
        filterKey: '',
        stomp: null,
        idDot: {}
    },

    mutations: {
        INIT_ADMIN(state, admin) {
            state.currentAdmin = admin;
        },
        initRoutes(state, data) {
            state.routes = data;
        },
        changeCurrentSession(state, currentSession) {
            state.currentSession = currentSession;
            Vue.set(state.idDot, state.currentAdmin.username + '#' + state.currentSession.username, false);
        },
        addMessage(state, msg) {
            let mss = state.sessions[state.currentAdmin.username + '#' + msg.to];
            if (!mss) {
                // state.sessions[state.currentAdmin.username + '#' + msg.to] = [];
                Vue.set(state.sessions, state.currentAdmin.username + '#' + msg.to, []);
            }
            state.sessions[state.currentAdmin.username + '#' + msg.to].push({
                content: msg.content,
                date: new Date(),
                self: !msg.notSelf
            })
        },
        INIT_DATA(state) {
            //浏览器本地的历史聊天记录
            let data = localStorage.getItem('vue-chat-session');
            if (data) {
                state.sessions = JSON.parse(data);
            }
        },
        INIT_ADMINS(state, data) {
            state.admins = data;
        },
    },

    actions: {
        connect(context) {
            context.state.stomp = Stomp.over(new SockJS('/ws/ep'));
            let token = window.sessionStorage.getItem('tokenStr');
            context.state.stomp.connect({'Auth-Token': token}, success => {
                context.state.stomp.subscribe('/user/queue/chat', msg => {
                    let receiveMsg = JSON.parse(msg.body);
                    if (!context.state.currentSession || receiveMsg.from != context.state.currentSession.username) {
                        Notification.info({
                            title: '【' + receiveMsg.formNickName + '】发来一条消息',
                            message: receiveMsg.content.length > 10 ? receiveMsg.content.substr(0, 10) : receiveMsg.content,
                            position: 'bottom-right'
                        });
                        Vue.set(context.state.idDot, context.state.currentAdmin.username + '#' + receiveMsg.from, true);
                        console.log(context.state.idDot)
                    }
                    receiveMsg.notSelf = true;
                    receiveMsg.to = receiveMsg.from;
                    context.commit('addMessage', receiveMsg);
                })
            }, error => {

            })
        },
        initData(context) {
            context.commit('INIT_DATA');
            getRequest('/chat/admin').then(resp => {
                if (resp) {
                    context.commit('INIT_ADMINS', resp)
                }
            })
        }
    }
})


store.watch(function (state) {
    return state.sessions
}, function (val) {
    localStorage.setItem('vue-chat-session', JSON.stringify(val));
}, {
    deep: true/*这个貌似是开启watch监测的判断,官方说明也比较模糊*/
}

export default store;