这篇文章主要为大家详细介绍了Vue+ssh框架实现在线聊天,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue+ssh框架实现在线聊天的具体代码,供大家参考,具体内容如下
效果图
核心部分
websocket编程
向后台发送消息
<div class="cht"> <div> </div></div><div class="smess"> <br>发送消息</div> .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%; }
组件my.vue
<div class="rborders"> <span>{{message}}</span><br><span class="time">{{time}}</span> </div><div class="lborders"> <br> <span>{{message}}</span><br><span class="time">{{time}}</span></div> .ms{ text-align: right; margin-right: 0%; } .logo{ width:60px; height: 60px; border-radius: 50%; } .time{ font-size:14px; } .lborders{ position: relative; margin-left:0%; } .rborders{ position: relative; margin-right: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 ja<strong>本文来源gao@daima#com搞(%代@#码网</strong>vax.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 map=new ConcurrentHashMap(); 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()); } } }
注意:导入两个包
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持gaodaima搞代码网。
以上就是Vue+ssh框架实现在线聊天的详细内容,更多请关注gaodaima搞代码网其它相关文章!