springboot+websocket+vue+vuex实现在线聊天（客户端）

一、使用node代理ws请求

proxyObj['/ws'] = {
    ws: true,
    target: "ws://localhost:8081"
}

导入连接需要连接websocket的js 

npm install sockjs-client
npm install stompjs
npm install [email protected] --save //这个是css写法需要用到的 不加版本会报错
npm install [email protected] --save //安装sass-loader 需要有node-sass

二、创建聊天窗口

        可以使用一个按钮来跳转到聊天页面 

          

goChat(){
      this.$router.push('/chat');
    }

三、聊天页面绘制 （引入第三方的样式） 主页面

分模块页面 聊天框自己头像

聊天页面

输入信息页面

朋友列表栏

三、vuex 状态管理栏

import Vue from 'vue';
import Vuex from 'vuex';
import {getRequest} from "@/utils/config";
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        routers:[],
        sessions: {},
        checkUser:null,
        filterKey:'',
        hrs:[],
        stomp:null,
        currentUser:null,
    },
    mutations:{
        initRouters(state,data){
            state.routers = data;
        },
        changeCurrentUser (state,user) {
            state.checkUser = user;
        },
        init_currentUser(state,currentUser){
            state.currentUser = currentUser;
        },
        addMessage (state,msg) {
            let mess = state.sessions[state.currentUser.username+'*' + msg.send];
            if (!mess){
                Vue.set(state.sessions,state.currentUser.username+'*'+msg.send,[]);
            }
            state.sessions[state.currentUser.username+'*' + msg.send].push({
                content:msg.content,
                date: new Date(),
                self:!msg.isSlef
            })
        },
        INIT_DATA (state) {
            let data = sessionStorage.getItem('vue-chat-session');
            if (data) {
                state.sessions = JSON.parse(data);
            }
        },
        INIT_HR(state,data){
            state.hrs = data;
        }

    },
    actions: {
        initData (context) {
            context.commit('INIT_DATA');
            getRequest('/chat/hr').then(resp=>{
                if (resp){
                    context.commit('INIT_HR',resp)
                }
            });

            context.state.stomp = Stomp.over(new SockJS('/ws/ep'));
            context.state.stomp.connect({},success=>{
                context.state.stomp.subscribe('/user/queue/chat',msg=>{
                    let message = JSON.parse(msg.body);
                    message.isSlef =true;
                    message.send = message.from;
                    context.commit('addMessage',message);
                })
            },error=>{

            })
        }
    }
})

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

export default store;

四、补充 

vuex的mutations方法在页面刷新时，会重新加载vuex，所以此时获取到的数据会加载不到，如果用到获取属性时会报错，比如我在登录时获取用户数据，并commit到mutations，然后拿到用户名做操作，但是刷新时用户信息会没有，导致报错。解决方法如下

在APP.vue中