vue实现聊天(Vue+ssh框架实现在线聊天)
类别:编程学习 浏览量:414
时间:2021-10-19 06:08:51 vue实现聊天
Vue+ssh框架实现在线聊天本文实例为大家分享了Vue+ssh框架实现在线聊天的具体代码,供大家参考,具体内容如下
效果图
核心部分
websocket编程
向后台发送消息
<template> <el-container> <el-header > </el-header> <el-main> <li class="cht"> <li v-for="(d,index) in mycontent" :key="index"> <my :message="d.mess" :time="d.time" :bl="d.bl"></my> </li> </li> <li class="smess"> <el-row> <el-col :span="18"> <el-input type="textarea" placeholder="请输入内容" v-model="textarea" class="text"></el-input> </el-col> <el-col :span="6"> <br> <el-button type="primary" round @click="mess()">发送消息</el-button> </el-col> </el-row> </li> </el-main> </el-container> </template> <style> .smess{ left: 20%; width:70%; position: absolute; top:70% } .text{ border: 1px solid #409eff; } .cht{ width: 55%; height: 30%; background-color: burlywood; margin-left: 18%; } </style> <script> import router from "../../router/router.js"; import my from "./my"; import axios from "axios"; import Qs from "qs"; var mylogo=localStorage.getItem("logo");//当前的的用户头像 var identity=localStorage.getItem("identity");//当前身份 var name=localStorage.getItem("username");//当前用户名 //从上一个页面获取一个老师名称 var teacher=''; export default { components: { my }, methods: { //在方法里调用this.websocketsend()发送数据给服务器 onConfirm() { //需要传输的数据 var data="你好"; this.websocketsend(JSON.stri.jpg" alt="vue实现聊天(Vue+ssh框架实现在线聊天)" border="0" />
组件my.vue
<template> <li v-if="bl" class="rborders"> <el-row class="ms"> <el-col :span="22"> <el-row><span>{{message}}</span></el-row> <br> <el-row><span class="time">{{time}}</span></el-row> </el-col> <el-col :span="2" > <img src="mylogo" class="logo"/> </el-col> </el-row> </li> <li v-else class="lborders"> <el-row> <el-col :span="2" > <img src="http://localhost:8080/PsychoSys/title/user.jpg" alt="vue实现聊天(Vue+ssh框架实现在线聊天)" border="0" />
后台代码
package cn.com.socket; import java.io.IOException; import java.text.SimpleDateFormat; import java.util.Date; import java.util.Map; import java.util.concurrent.ConcurrentHashMap; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import org.hibernate.SessionFactory; import net.sf.json.JSONObject; @ServerEndpoint("/javasocket/{uname}") public class SocketPart { //日期化 private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm"); //存储会话的集合,value类型是java类class SocketPart private static Map<String,SocketPart> map=new ConcurrentHashMap<String,SocketPart>(); private String username; private Session session; private SessionFactory sf; public SessionFactory getSf() { return sf; } public void setSf(SessionFactory sf) { this.sf = sf; } @OnOpen public void open(@PathParam("uname")String username,Session session){ this.username=username; this.session=session; map.put(username,this); } @OnClose public void close(){ map.remove(this.username); try { this.session.close(); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } System.out.println("关闭"); } @OnError public void error(Throwable t) { // 添加处理错误的操作 close(); System.out.println("发生错误"); t.printStackTrace(); } @OnMessage public void mess(String message,Session session){ JSONObject jsonObject = JSONObject.fromObject(message); jsonObject.put("date", DATE_FORMAT.format(new Date())); //把当前集合的大小给前台,不然的话,就不知道怎么存储 jsonObject.put("cusize",map.size()); //接收到信息 for (String s : map.keySet()) { if(this.username.equals(map.get(s).username)){ jsonObject.put("isSelf", true); }else{ jsonObject.put("isSelf", false); } map.get(s).session.getAsyncRemote().sendText(jsonObject.toString()); } } }
注意:导入两个包
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vuekeep-alive源码(vue中keepAlive组件的作用和使用方法详解)
- vue3封装table组件(Vue封装通用table组件的完整步骤记录)
- vue 表格数据增加修改(vue element实现表格增加删除修改数据)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue文件上传进度处理(Vue 大文件上传和断点续传的实现)
- vue滚动条滚动事件(vue实现一个滚动条样式)
- vue高阶组件怎么用(vue更多筛选项小组件使用详解)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- vue验证码怎么用(vue验证码组件使用方法详解)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vue走马灯特效(Javascript结合Vue实现对任意迷宫图片的自动寻路)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue3 composition api用法(vue3中provide和inject的使用)
- elementui和vue详解(Vue+Element UI实现概要小弹窗的全过程)
- vue自定义组件修饰符(Vue自定义组件使用事件修饰符的踩坑记录)
- vue插槽的分类(vue具名插槽的基本使用实例)
- 每周一首古诗 《绝句》(每周一首古诗绝句)
- 蓝色代表什么(蓝色代表什么性格的人)
- 红色代表什么(红色代表什么情感和含义)
- 南宋志南和尚绝句 杨柳风似庙中来(南宋志南和尚绝句)
- 今天要穿什么颜色(今天要穿什么颜色的衣服最吉利)
- 一道高中题-求杯子的高度(一道高中题-求杯子的高度)
热门推荐
- tomcat环境配置教程(Tomcat服务器的安装配置图文教程推荐)
- python中迭代器的作用(Python3.5迭代器与生成器用法实例分析)
- 使用python制作游戏(python制作填词游戏步骤详解)
- python撤回的微信消息怎么看(Python实现微信消息防撤回功能的实例代码)
- jquery中serialize方法对空格的处理
- docker端口配置(docker 无法释放端口的解决方案)
- sqlserver语句中的temp(SQL SERVER中强制类型转换cast和convert的区别详解)
- linux设置lib目录(Linux如何使用libudev获取USB设备VID及PID)
- dedecms新字段(DEDECMSv5.6 tags.php标签不能按照时间排序的问题)
- mysql索引原理及调优(mysql高级学习之索引的优劣势及规则使用)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9