DDR爱好者之家 Design By 杰米
1. vue代码
methods: { //在方法里调用 this.websocketsend()发送数据给服务器 onConfirm () { //需要传输的数据 let data = { code: 1, item: ‘传输的数据' } this.websocketsend(JSON.stringify(data)) }, /* */ initWebSocket () { // 初始化weosocket let userinfo = getUserInfo() let username = userinfo.waiter_userid this.websock = new WebSocket('ws://' + baseURL + '/websocket/' + username) this.websock.onmessage = this.websocketonmessage this.websock.onerror = this.websocketonerror this.websock.onopen = this.websocketonopen this.websock.onclose = this.websocketclose }, websocketonopen () { // 连接建立之后执行send方法发送数据 let data = { code: 0, msg: '这是client:初次连接' } this.websocketsend(JSON.stringify(data)) }, websocketonerror () { console.log( 'WebSocket连接失败') }, websocketonmessage (e) { // 数据接收 console.log('数据接收' + e.data) }, websocketsend (Data) { // 数据发送 this.websock.send(Data) }, websocketclose (e) { // 关闭 console.log('已关闭连接', e) } }, created () { console.log('created') this.initWebSocket() }, data () { return { websocket: null } }, destroyed () { this.websock.close() // 离开路由之后断开websocket连接 }
2. java代码
项目引入tomcat安装目录里的两个依赖包
package diancan.servlet; import java.io.IOException; 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; @ServerEndpoint("/websocket/{username}") public class WebSocket { private static int onlineCount = 0; private static Map<String, WebSocket> clients = new ConcurrentHashMap<String, WebSocket>(); private Session session; private String username; @OnOpen public void onOpen(@PathParam("username") String username, Session session) throws IOException { this.username = username; this.session = session; addOnlineCount(); clients.put(username, this); System.out.println("已连接" + username); } @OnClose public void onClose() throws IOException { clients.remove(username); subOnlineCount(); } @OnMessage public void onMessage(String message) throws IOException { DataWrapper res = new DataWrapper(); System.out.println("message:" + message); JSONObject req = JSONObject.parseObject(message); // System.out.println("item:" + req.getJSONObject("item")); // System.out.println("item:" + req.getInteger("code")); // 发送数据给服务端 sendMessageAll(JSON.toJSONString(res)); } @OnError public void onError(Session session, Throwable error) { error.printStackTrace(); } public void sendMessageTo(String message, String To) throws IOException { // session.getBasicRemote().sendText(message); // session.getAsyncRemote().sendText(message); for (WebSocket item : clients.values()) { if (item.username.equals(To)) item.session.getAsyncRemote().sendText(message); } } public void sendMessageAll(String message) throws IOException { for (WebSocket item : clients.values()) { item.session.getAsyncRemote().sendText(message); } } public static synchronized int getOnlineCount() { return onlineCount; } public static synchronized void addOnlineCount() { WebSocket.onlineCount++; } public static synchronized void subOnlineCount() { WebSocket.onlineCount--; } public static synchronized Map<String, WebSocket> getClients() { return clients; } }
在项目别的类可通过new WebSocket()向客户端发送数据
WebSocket ws = new WebSocket();
ws.sendMessageAll(JSON.toJSONString(rs));
以上这篇Vue+Java 通过websocket实现服务器与客户端双向通信操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]