springboot+websocket+vue 服务端向前端推送消息
最近项目中需要进行在线用户管理，故采用了websocket来实现消息推送至前端
pom依赖
<!-- WebSocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
<version>2.1.0.RELEASE</version>
</dependency>
后端
@Service public class UserOnlineInfoServiceImpl implements UserOnlineInfoService { @Autowired private UserDao userDao; @Autowired private RoleDao roleDao; @Autowired private UserOnlineInfoDao userOnlineInfoDao; /** * 根据条件查询 * @param userOnlineQuery * @return */ @Override public List<UserOnlineInfoDTO> query(UserOnlineQuery userOnlineQuery) { try { UserOnlineInfo onlineInfo = new UserOnlineInfo(); if (userOnlineQuery != null) { if (StrUtil.isBlank(userOnlineQuery.getName())) { userOnlineQuery.setName(null); } if (StrUtil.isBlank(userOnlineQuery.getCode())) { userOnlineQuery.setCode(null); } BeanUtils.copyProperties(userOnlineQuery, onlineInfo); } List<UserOnlineInfo> onlineInfos = userOnlineInfoDao.queryByCondition(onlineInfo); List<UserOnlineInfoDTO> onlineInfoDTOs = new ArrayList<>(onlineInfos.size()); onlineInfos.forEach(info -> { UserOnlineInfoDTO infoDTO = new UserOnlineInfoDTO(); BeanUtils.copyProperties(info, infoDTO); onlineInfoDTOs.add(infoDTO); }); return onlineInfoDTOs; } catch (Exception e) { throw new ServiceException(SystemManageExceptionEnum.ONLINEUSER_MANAGE_QUERY_FALSE, e); } } /** * 类型转换 * * @Param: [dto] * @Return: com.boss.bes.user.permission.dao.entity.UserOnlineInfoPo * @Date: 2020/9/2 15:27 */ public UserOnlineInfo doObjectTransfer(UserOnlineInfoDTO dto) { if (dto == null) { return null; } UserOnlineInfo userOnlineInfoPo = new UserOnlineInfo(); BeanUtil.copyProperties(dto, userOnlineInfoPo); return userOnlineInfoPo; } /** * 类型转换 * * @Param: [entity] * @Return: com.boss.bes.user.permission.pojo.dto.UserOnlineInfoDto * @Date: 2020/9/2 15:27 */ public UserOnlineInfoDTO doObjectTransfer(UserOnlineInfo entity) { if (entity == null) { return null; } UserOnlineInfoDTO userOnlineInfoDto = new UserOnlineInfoDTO(); BeanUtil.copyProperties(entity, userOnlineInfoDto); return userOnlineInfoDto; } @Override public UserOnlineInfoDTO userLogin(UserOnlineInfoDTO userOnlineInfoDTO) { if (userOnlineInfoDTO == null || userOnlineInfoDTO.getUserId() == null) { return null; } try { User user = userDao.get(userOnlineInfoDTO.getUserId()); if (user == null) { return null; } UserOnlineInfo userOnlineInfo = new UserOnlineInfo(); userOnlineInfo.setUserId(user.getId()); userOnlineInfo.setCode(user.getCode()); userOnlineInfo.setName(user.getName()); userOnlineInfo.setIp(userOnlineInfoDTO.getIp()); userOnlineInfo.setOnlineTime(new Date()); userOnlineInfoDao.save(userOnlineInfo); BeanUtils.copyProperties(userOnlineInfo, userOnlineInfoDTO); return userOnlineInfoDTO; } catch (Exception e) { throw new ServiceException(SystemManageExceptionEnum.ONLINEUSER_MANAGE_LOGIN_FALSE, e); } } @Override public List<UserOnlineInfoDTO> forceUserLogout(List<UserOnlineInfoDTO> infoDTOs) { if (CollectionUtil.isEmpty(infoDTOs)) { return new ArrayList<>(); } //过滤重复的，或为null的用户id Set<Long> userIdSet = infoDTOs.stream() .filter(dto -> dto != null && dto.getUserId() != null) .map(UserOnlineInfoDTO::getUserId) .collect(Collectors.toSet()); try { if (CollectionUtil.isEmpty(userIdSet)) { return new ArrayList<>(); } //过滤非本公司或者本机构的用户 Set<Long> safeUserIdSet = roleDao.queryUserIdIn(userIdSet).stream() .map(BaseEntity::getId) .collect(Collectors.toSet()); if (CollectionUtil.isEmpty(safeUserIdSet)) { return new ArrayList<>(); } infoDTOs.removeIf(infoDTO -> !safeUserIdSet.contains(infoDTO.getUserId())); if (CollectionUtil.isEmpty(infoDTOs)) { return new ArrayList<>(); } List<UserOnlineInfo> infos = new ArrayList<>(infoDTOs.size()); Date currentDate = new Date(); infoDTOs.forEach(infoDTO -> { UserOnlineInfo onlineInfo = new UserOnlineInfo(); infoDTO.setOfflineTime(currentDate); //下线状态 infoDTO.setStatus((byte) 1); BeanUtils.copyProperties(infoDTO, onlineInfo); long duration = (currentDate.getTime() - infoDTO.getOnlineTime().getTime()) / (1000); onlineInfo.setStopTime((int) duration); infos.add(onlineInfo); }); userOnlineInfoDao.batchUpdate(infos); return infoDTOs; } catch (Exception e) { throw new ServiceException(SystemManageExceptionEnum.ONLINEUSER_MANAGE_LOGOUT_FALSE, e); } } @Override public boolean userLogout(UserOnlineInfoDTO infoDTO) { if (infoDTO == null) { return false; } try { infoDTO.setOfflineTime(new Date()); long duration = (infoDTO.getOfflineTime().getTime() - infoDTO.getOnlineTime().getTime()) / (1000); infoDTO.setStopTime((int) duration); //下线状态 infoDTO.setStatus((byte) 1); UserOnlineInfo onlineInfo = new UserOnlineInfo(); BeanUtils.copyProperties(infoDTO, onlineInfo); return userOnlineInfoDao.unsafeUpdate(onlineInfo) > 0; } catch (Exception e) { throw new ServiceException(SystemManageExceptionEnum.ONLINEUSER_MANAGE_LOGOUT_FALSE, e); } } }
前端
Vuex中在用户登录调用的方法中加入建立websocket的代码，在用户登录的时候就发送请求，与服务器进行连接，全程一直保持连接，接受服务器的信息。
// 与服务器建立连接 if (WebSocket) { const socket = new WebSocket(`${BASE_URL}/permission/websocket/${user.id}`) commit('SET_SOCKET', socket) socket.onopen = (e) => { heartCheck.start() } socket.onmessage = (e) => { console.log(e) try { const res = JSON.parse(e.data) if (res && res.body) { // 收到强制下线请求 if (res.body === 'logout') { if (state.socket) { const socket = state.socket commit('SET_SOCKET', null) socket.close() } MessageBox.confirm('你已经被管理员强制下线了', '强制下线通知', { confirmButtonText: '重新登录', cancelButtonText: '停留在此页', type: 'warning' }).then(() => { // 登出 dispatch('logout').then(() => { location.reload() }) }).catch(() => { // 清除token信息 dispatch('resetToken').then(() => { }) }) } // 收到被顶下线请求 if (res.body === 'replaceLogout') { if (state.socket) { const socket = state.socket commit('SET_SOCKET', null) socket.close() } MessageBox.confirm('你已经其他地方登录', '强制下线通知', { confirmButtonText: '重新登录', cancelButtonText: '停留在此页', type: 'warning' }).then(() => { // 登出 dispatch('logout').then(() => { location.reload() }) }).catch(() => { // 清除token信息 dispatch('resetToken').then(() => { }) }) } } } catch (err) { console.log(err) } } socket.onclose = (e) => { console.log(e) heartCheck.clear() dispatch('resetToken').then(() => {}) } socket.onerror = (e) => { console.log(e) Message({ message: '连接服务器失败', type: 'error', duration: 5 * 1000 }) } }
