本文實(shí)例為大家分享了Vue+ssh框架實(shí)現(xiàn)在線聊天的具體代碼，供大家參考，具體內(nèi)容如下

websocket編程

向后臺(tái)發(fā)送消息

<template><el-container> <el-header > </el-header> <el-main> <div class='cht'> <div v-for='(d,index) in mycontent' :key='index'> <my :message='d.mess' :time='d.time' :bl='d.bl'></my> </div> </div><div class='smess'> <el-row> <el-col :span='18'><el-input type='textarea' placeholder='請(qǐng)輸入內(nèi)容' v-model='textarea' class='text'></el-input> </el-col> <el-col :span='6'> <br> <el-button type='primary' round @click='mess()'>發(fā)送消息</el-button> </el-col> </el-row> </div> </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');//當(dāng)前的的用戶(hù)頭像var identity=localStorage.getItem('identity');//當(dāng)前身份 var name=localStorage.getItem('username');//當(dāng)前用戶(hù)名 //從上一個(gè)頁(yè)面獲取一個(gè)老師名稱(chēng) var teacher=’’;export default { components: { my }, methods: { //在方法里調(diào)用this.websocketsend()發(fā)送數(shù)據(jù)給服務(wù)器 onConfirm() { //需要傳輸?shù)臄?shù)據(jù) var data='你好'; this.websocketsend(JSON.stringify(data)); },//點(diǎn)擊發(fā)送把消息給后臺(tái) mess(){var mydata=this.textarea; let data = {msg: mydata}; this.websocketsend(JSON.stringify(data)); }, /* */ initWebSocket() { // 初始化weosocket //獲取當(dāng)前的用戶(hù)名 this.websock = new WebSocket('ws://localhost:8080/PsychoSys/javasocket/' +name ); this.websock.onmessage = this.websocketonmessage; this.websock.onerror = this.websocketonerror; this.websock.onopen = this.websocketonopen; this.websock.onclose = this.websocketclose; }, websocketonopen() { // 連接建立之后執(zhí)行send方法發(fā)送數(shù)據(jù) let data = { code: 0, msg: '這是client：初次連接' }; }, websocketonerror() { console.log('WebSocket連接失敗'); }, websocketonmessage(e) { // 數(shù)據(jù)接收 var s=eval(’(’ + e.data + ’)’); //把數(shù)據(jù)都插入到里面去 this.mycontent.push({mess:s.msg,time:s.date,bl:s.isSelf,mylogo:mylogo}); }, websocketsend(Data) { // 數(shù)據(jù)發(fā)送 this.websock.send(Data) }, websocketclose(e) { // 關(guān)閉 console.log('已關(guān)閉連接', e); } }, created() { console.log('created'); this.initWebSocket(); }, data() { return { websocket: null, textarea:’’ , mycontent:[], iden:true }; }, destroyed() { this.websock.close(); }};</script>

組件my.vue

<template><div 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='http://www.leifengta.com.cn/bcjs/mylogo' /> </el-col> </el-row> </div> <div v-else class='lborders'> <el-row> <el-col :span='2' > <img src='http://localhost:8080/PsychoSys/title/user.png' /> </el-col> <br> <el-col :span='12'> <el-row ><el-col :span='24'><span >{{message}}</span></el-col></el-row> <br> <el-row><span class='time'>{{time}}</span></el-row> </el-col> </el-row> </div></template><style>.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%;}</style><script>export default { props: [’message’,’time’,’bl’,’mylogo’], data() {return { }; },}</script>

后臺(tái)代碼

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'); //存儲(chǔ)會(huì)話的集合,value類(lèi)型是java類(lèi)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('關(guān)閉'); } @OnError public void error(Throwable t) { // 添加處理錯(cuò)誤的操作 close(); System.out.println('發(fā)生錯(cuò)誤'); t.printStackTrace(); } @OnMessage public void mess(String message,Session session){ JSONObject jsonObject = JSONObject.fromObject(message); jsonObject.put('date', DATE_FORMAT.format(new Date())); //把當(dāng)前集合的大小給前臺(tái)，不然的話，就不知道怎么存儲(chǔ) 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()); } }}

注意：導(dǎo)入兩個(gè)包

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。