微人事项目学习之聊天功能

最新推荐文章于 2021-10-29 15:40:03 发布
最新推荐文章于 2021-10-29 15:40:03 发布
阅读量765 收藏 6
点赞数 1
分类专栏： 微人事项目学习 文章标签： websocket vue spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45323354/article/details/105256173
版权

学习SpringBoot+Vue前后端分离项目，原项目GitHub地址，项目作者江雨一点雨博客。

聊天界面选用

聊天界面选用github开源项目is-liyiwei/vue-Chat-demo,克隆到本地仓库，

前端页面

安装sass-loader、node-sass

npm install sass-loader --save-dev  //安装到dev环境下

npm install node-sass   --save-dev

Home.vue中在el-dropdown上添加聊天功能按钮

<div>
     <el-button icon="el-icon-bell" type="text" style="margin-right: 8px;color: #000000;" size="normal" @click="goChat"></el-button>
     <el-dropdown class="userInfo" @command="commandHandler">
     	<span class="el-dropdown-link">
    		{{user.name}}<i><img :src="user.userface" alt=""></i>
     	</span>
      	<el-dropdown-menu slot="dropdown">
      		<el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
      		<el-dropdown-item command="setting">设置</el-dropdown-item>
      		<el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
      	</el-dropdown-menu>
     </el-dropdown>
</div>

methods中添加goChat

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

创建views/chat/FriendChat.vue,并在router中添加，将上面克隆到仓库的项目中的App.vue拷贝到FriendChat.vue

import FriendChat from './views/chat/FriendChat.vue'

children:[
                {
                    path: '/chat',
                    name: '在线聊天',
                    component: FriendChat,
                    hidden:true
                }
            ]

<template>
    <div id="app">
        <div class="sidebar">
            <card></card>
            <list></list>
        </div>
        <div class="main">
            <message></message>
            <usertext></usertext>
        </div>
    </div>
</template>

<script>
    import card from '../../components/chat/card.vue'
    import list from '../../components/chat/list.vue'
    import message from '../../components/chat/message.vue'
    import usertext from '../../components/chat/usertext.vue'

    export default {
    	//可改可不改，原为app
        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>

创建components/chat，将仓库中的四个组件拷贝进来
组件

后端

动态信息获取

ChatController

@RestController
@RequestMapping("/chat")
public class ChatController {
    @Autowired
    HrService hrService;
    @GetMapping("/hrs")
    public List<Hr> getAllHrs() {
        return hrService.getAllHrsExceptCurrentHr();
    }
}

HrService

public List<Hr> getAllHrsExceptCurrentHr() {
        return hrMapper.getAllHrsExceptCurrentHr(HrUtils.getCurrentHr().getId());
    }

HrMapper

public List<Hr> getAllHrsExceptCurrentHr() {
        return hrMapper.getAllHrsExceptCurrentHr(HrUtils.getCurrentHr().getId());
    }

HrMapper.xml

<select id="getAllHrsExceptCurrentHr" resultMap="BaseResultMap">
        select * from hr where id !=#{id};
</select>

WebSocket

后端

添加依赖
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
配置

vhr-web/config/WebSocketConfig

@Configuration
//开启消息代理
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
    	//设置"/ws/ep"为endPoint，开启SockJs
    	//setAllowedOrigins不限访问源，解决跨域问题
        registry.addEndpoint("/ws/ep").setAllowedOrigins("*").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {		
    	//设置"/queue"消息代理
        registry.enableSimpleBroker("/queue");
    }
}
Model

model/ChatMsg

public class ChatMsg {
    private String from; //从哪儿来
    private String to;//到哪儿去
    private String content;//消息内容
    private Date date;//发送消息的日期
    private String fromNickname;//昵称
	//省略getter、setter
}
Controller

controller/WsController

@Controller
public class WsController {
    @Autowired
    SimpMessagingTemplate simpMessagingTemplate;

    @MessageMapping("/ws/chat")
    public void handleMsg(Authentication authentication, ChatMsg chatMsg) {
    	//当前用户
        Hr hr = (Hr) authentication.getPrincipal();
        chatMsg.setFrom(hr.getUsername());
        chatMsg.setFromNickname(hr.getName());
        chatMsg.setDate(new Date());
        //getTO获取发送给谁，"/queue/chat"路径，发送内容
        simpMessagingTemplate.convertAndSendToUser(chatMsg.getTo(), "/queue/chat", chatMsg);
    }
}

前端

配置

vue.config.js

proxyObj['/ws'] = {
    ws: true,
    target: "ws://localhost:8081"
};
添加工具文件

从GitHub上获取sockjs.js和stomp.js
工具

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
//消息提醒
import { Notification } from 'element-ui';
import {getRequest} from "../utils/api";
//导入新的文件
import '../utils/stomp'
import '../utils/sockjs'

Vue.use(Vuex)

const now = new Date();

const store = new Vuex.Store({
    state: {
        routes: [],
        sessions: {},
        hrs: [],
        currentSession: null,
        currentHr: JSON.parse(window.sessionStorage.getItem("user")),
        filterKey: '',
        stomp: null,
        isDot: {}
    },
    mutations: {
        INIT_CURRENTHR(state, hr) {
            state.currentHr = hr;
        },
        initRoutes(state, data) {
            state.routes = data;
        },
        changeCurrentSession(state, currentSession) {
        	//Vue.set( target, key, value )
			//target：要更改的数据源(可以是对象或者数组)
			//key：要更改的具体数据
			//value ：重新赋的值
			//这样做可以在key发生改动的时候页面自动刷新，在这里就是接受消息时页面刷新
            Vue.set(state.isDot, state.currentHr.username + '#' + currentSession.username, false);
            state.currentSession = currentSession;
        },
        //发送消息
        addMessage(state, msg) {
            let mss = state.sessions[state.currentHr.username + '#' + msg.to];
            if (!mss) {  
                
                Vue.set(state.sessions, state.currentHr.username + '#' + msg.to, []);
            }
            state.sessions[state.currentHr.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_HR(state, data) {
            state.hrs = data;
        }
    },
    actions: {
    	//接收消息
        connect(context) {
            context.state.stomp = Stomp.over(new SockJS('/ws/ep'));
            //两种回调，成功的回调
            context.state.stomp.connect({}, success => {
            	//注意必须加上/user
                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.fromNickname + '】发来一条消息',
                            message: receiveMsg.content.length > 10 ? receiveMsg.content.substr(0, 10) : receiveMsg.content,
                            position: 'bottom-right'
                        })
                        Vue.set(context.state.isDot, context.state.currentHr.username + '#' + receiveMsg.from, true);
                    }
                    receiveMsg.notSelf = true;
                    receiveMsg.to = receiveMsg.from;
                    context.commit('addMessage', receiveMsg);
                })
                //失败的回调
            }, error => {

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

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

动态信息更改

card.vue

<template>
  <div id="card">
  	<header>
  		<img class="avatar" v-bind:src="user.userface" v-bind:alt="user.name">
  		<p class="name">{{user.name}}</p>
  	</header>
  	<footer>
  		<input class="search" type="text" v-model="$store.state.filterKey" placeholder="search user...">
  	</footer>
  </div>
</template>

<script>
export default {
  name: 'card',
  data () {
    return {
      user: JSON.parse(window.sessionStorage.getItem("user"))
    }
  }
}
</script>

<style lang="scss" scoped>
#card {
	padding: 12px;
  .avatar{
  	width: 40px;
  	height: 40px;
  	vertical-align: middle;/*这个是图片和文字居中对齐*/
  }
  .name {
  	display: inline-block;
  	padding: 10px;
  	margin-bottom: 15px;
  	font-size: 16px;
  }
  .search {
  	background: #26292E;
  	height: 30px;
  	line-height: 30px;
  	padding: 0 10px;
  	border: 1px solid #3a3a3a;
  	border-radius: 4px;
  	outline: none;/*鼠标点击后不会出现蓝色边框*/
    color: #FFF;
  }
}
</style>

list.vue

<template>
    <div id="list">
        <ul style="padding-left: 0px">
        	//首先判断currentSesssion是否存在,存在就判断用户名是否相等否则不激活
            <li v-for="item in hrs" :class="{ active: currentSession?item.username === currentSession.username:false}"
                v-on:click="changeCurrentSession(item)">
                <!--   :class="[item.id === currentSession ? 'active':'']" -->
                <img class="avatar" :src="item.userface" :alt="item.name">
                //新消息提示小红点
                <el-badge :is-dot="isDot[user.username+'#'+item.username]"><p class="name">{{item.name}}</p></el-badge>
            </li>
        </ul>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: 'list',
        data() {
            return {
                user:JSON.parse(window.sessionStorage.getItem("user"))
            }
        },
        computed: mapState([
            'hrs',
            'isDot',
            'currentSession'
        ]),
        methods: {
            changeCurrentSession (currentSession) {
                this.$store.commit('changeCurrentSession', currentSession)
            }
        }
    }
</script>

<style lang="scss" scoped>
    #list {
        li {
            padding: 16px 15px;
            border-bottom: 1px solid #292C33;
            cursor: pointer;
            list-style: none;

            &:hover {
                background-color: rgba(255, 255, 255, 0.03);
            }
        }

        li.active { /*注意这个是.不是冒号:*/
            background-color: rgba(255, 255, 255, 0.1);
        }

        .avatar {
            border-radius: 2px;
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }

        .name {
            display: inline-block;
            margin-left: 15px;
            margin-top: 0px;
            margin-bottom: 0px;
        }
    }
</style>

message.vue

<template>
    <div id="message" v-scroll-bottom="sessions">
        <ul v-if="currentSession">
            <li v-for="entry in sessions[user.username+'#'+currentSession.username]">
                <p class="time">
                    <span>{{entry.date | time}}</span>
                </p>
                <div class="main" :class="{self:entry.self}">
                    <img class="avatar" :src="entry.self ? user.userface : currentSession.userface" alt="">
                    <p class="text">{{entry.content}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: 'message',
        data() {
            return {
                user: JSON.parse(window.sessionStorage.getItem("user"))
            }
        },
        computed: mapState([
            'sessions',
            'currentSession'
        ]),
        filters: {
            time(date) {
                if (date) {
                    date = new Date(date);
                }
                return `${date.getHours()}:${date.getMinutes()}`;
            }
        },
        directives: {/*这个是vue的自定义指令,官方文档有详细说明*/
            // 发送消息后滚动到底部,这里无法使用原作者的方法，也未找到合理的方法解决，暂用setTimeout的方法模拟
            'scroll-bottom'(el) {
                //console.log(el.scrollTop);
                setTimeout(function () {
                    el.scrollTop += 9999;
                }, 1)
            }
        }
    }
</script>

<style lang="scss" scoped>
    #message {
        padding: 15px;
        max-height: 68%;
        overflow-y: scroll;

        ul {
            list-style-type: none;
            padding-left: 0px;

            li {
                margin-bottom: 15px;
            }
        }

        .time {
            text-align: center;
            margin: 7px 0;

            > span {
                display: inline-block;
                padding: 0 18px;
                font-size: 12px;
                color: #FFF;
                background-color: #dcdcdc;
                border-radius: 2px;
            }
        }

        .main {
            .avatar {
                float: left;
                margin: 0 10px 0 0;
                border-radius: 3px;
                width: 30px;
                height: 30px;

            }

            .text {
                display: inline-block;
                padding: 0 10px;
                max-width: 80%;
                background-color: #fafafa;
                border-radius: 4px;
                line-height: 30px;
            }
        }

        .self {
            text-align: right;

            .avatar {
                float: right;
                margin: 0 0 0 10px;
                border-radius: 3px;
                width: 30px;
                height: 30px;
            }

            .text {
                display: inline-block;
                padding: 0 10px;
                max-width: 80%;
                background-color: #b2e281;
                border-radius: 4px;
                line-height: 30px;
            }
        }
    }
</style>

usertext.vue

<template>
    <div id="uesrtext">
        <textarea placeholder="按 Ctrl + Enter 发送" v-model="content" v-on:keyup="addMessage"></textarea>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: 'uesrtext',
        data() {
            return {
                content: ''
            }
        },
        computed: mapState([
            'sessions',
            'currentSession'
        ]),
        methods: {
            addMessage(e) {
                if (e.ctrlKey && e.keyCode === 13 && this.content.length) {
                    let msgObj = new Object();
                    msgObj.to = this.currentSession.username;
                    msgObj.content = this.content;
                    this.$store.state.stomp.send('/ws/chat', {}, JSON.stringify(msgObj));
                    this.$store.commit('addMessage', msgObj);
                    this.content = '';
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    #uesrtext {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 30%;
        border-top: solid 1px #DDD;

        > textarea {
            padding: 10px;
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
        }
    }
</style>
人生错觉
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微人事项目
04-24
人事管理系统——微人事。主要目的是通过这个项目加强各个部门之间的协调从而提高工作效率。该项目是一个前后端分离的开发方式，前端使用vue来构建单页面应用， 单页面应用通过动态重写当前页面来与用户交互，而非...
微人事项目sql脚本新建vhr库直接运行此sql文件即可
08-27
微人事项目sql脚本新建vhr库直接运行此sql文件即可
微人事第十天：WebSocket实现在线群聊
qq_41998938的博客
02-10 308
WebSocket的由来： 大家都知道，HTML页面在刚刚开始出现的时候是静态的，不能够进行交互，后来有了JavaScript，在一定程度上解决了这个问题，但是JavaScript刚出现的时候并不能和服务端进行交互，直到Ajax的出现。Ajax有效的解决了页面和服务端进行交互的问题，不过Ajax有一个问题，就是所有的请求都必须由客户端发起，服务端进行响应，如果服务端有最新的消息，难以即时的发送到客...
微人事（8）-在线聊天WebSocket
weixin_44021967的博客
08-12 181
文章目录1.服务器配置和controller2.前端的聊天配置 1.实时消息 使用了开源项目： github.com/Coffcer/vue-chat/issues /is-liyiwei/vue-Chat-demo 1.服务器配置和controller @Configuration @EnableWebSocketMessageBroker//开启消息代理 public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
微人事第十一天：WebSocket实现单聊
qq_41998938的博客
02-10 336
上一篇博客我们介绍了在Spring Boot框架下使用WebSocket实现消息推送，消息推送是一对多，服务器发消息发送给所有的浏览器，这次我们来看看如何使用WebSocket实现消息的一对一发送，模拟的场景就是利用网页来实现两个人在线聊天。OK，那我们来看看这个要怎么实现。 #引入Spring Security并配置 由于这里涉及到多个用户之间互相传递消息的问题，涉及到的权限管理问题我使用Spr...
微人事-基础信息设置
azto的博客
06-10 241
基础信息设置前端elementui的选项卡定义组件引用组件使用组件效果 前端 elementui的选项卡 activeName的值 是默认打开的页 data(){ return{ activeName:'second' } <template> <el-tabs v-model="activeName" type="card"> <el-tab-pane label="
sass-loader与node-sass版本兼容问题
nuyoahso的博客
10-26 3954
vue安装 sass-loader@7.3.1： 安装成功， vue安装 node-sass报错： D:\keep\vue\vue-rent>npm install node-sass --save-dev npm ERR! code 1 npm ERR! path D:\keep\vue\vue-rent\node_modules\node-sass npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s
C#项目开发之人事工资管理系统
07-11
C#项目开发之人事工资管理系统
C#项目之企业人事管理系统（含源码）
08-22
C#项目之企业人事管理系统（含源码）
管理系统微人事.zip
02-06
基于j2ee的人事管理系统
开源hr系统 java_微人事-前后端分离的人力资源管理系统-江南一点雨
weixin_39728213的博客
02-23 1761
项目介绍微人事是一个前后端分离的人力资源管理系统，项目采用SpringBoot+Vue开发。作者江南一点雨,也是我非常敬佩一个人,大家可以关注他的公众号 '江南一点雨'技术栈后端技术栈1.SpringBoot2.SpringSecurity3.MyBatis4.MySQL前端技术栈1.Vue2.ElementUI3.axios4.vue-router还有其他一些琐碎的技术就不一一列举了。快速部署1...
微人事系统笔记
m_iNoError的博客
05-31 437
CustomFilterInvocationSecurityMetadataSource类：通过当前的请求地址，获取该地址需要的用户角色
微人事（vhr）开源项目部署
热门推荐
重生之我不会写代码
04-22 1万+
一.项目准备 微人事是一个前后端分离的项目，采用SpringBoot+Vue开发。 后端需要 二.项目部署 1）可以使用git命令进行拉取，也可以自己下载 微人事项目Gitee地址 2）数据库新建一个vhr的空数据库（之创建数据一个空数据库就可以，运行项目的时候，会自动创建导入表，实现导入在运行的时候会报错） 3）使用idea打开项目 4）如果只打开后端一般不会出现maven构建，如果两个一起打开，会出现 点击 import 就OK ...
Java 前后端分离的人力资源管理系统笔记
Cybenko
06-15 1064
本文适合刚学习完 Java 语言基础的人群，跟着本文可了解和运行项目，本示例是在 Windows 操作系统下演示。 基于 Java 语言的人力资源管理开源项目——微人事 微人事是一个前后端分离的人力资源管理系统，项目采用 SpringBoot + Vue 架构。...
springboot-Security获取当前的用户信息案例
不怕万人阻挡，只怕自己投降
11-02 2280
springboot-Security获取当前的用户信息案例
vue聊天笔记
qq_38388578的博客
10-29 262
1、安装 cnpm i sockjs-client stompjs --save 2、使用 store/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'; Vu
QuartzUtils工具类
huangyueranbbc的博客
11-08 2999
Quartz工具类。包含一些常用的操作。 Job、Trigger、JobDetail、Listener、JobExecutionException、misfire、Priority、Durably、Recovery、DisallowConcurrentExecution、PersistJobDataAfterExecution、ThreadPool、usingJobData、Quartz Plu...
Utils（下）一些常用的工具类
madreain的博客
06-22 779
Utils（下）一些常用的工具类1.App相关信息的工具类/**
开源项目微人事学习大概需要多久
最新发布
06-13
3. 学习微人事的功能和业务流程，了解每个模块的实现方式。 4. 阅读微人事的源代码，理解每个类和方法的作用和实现方式。 5. 在本地环境中部署和运行微人事，熟悉项目的开发和调试工具。 6. 练习编写代码，实现微...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值