Vue+Java 通过websocket实现服务器与客户端双向通信操作


Posted in Javascript onSeptember 22, 2020

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安装目录里的两个依赖包

Vue+Java 通过websocket实现服务器与客户端双向通信操作

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实现服务器与客户端双向通信操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
Jquery获取和修改img的src值的方法
Feb 17 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
jQuery中DOM树操作之复制元素的方法
Jan 23 Javascript
JavaScript实现的字符串replaceAll函数代码分享
Apr 02 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
js实现全选和全不选
Jul 28 Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 Javascript
Vue实现开关按钮拖拽效果
Sep 22 #Javascript
JS如何生成动态列表
Sep 22 #Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 #Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 #Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 #Javascript
Js跳出两级循环方法代码实例
Sep 22 #Javascript
vue 二维码长按保存和复制内容操作
Sep 22 #Javascript
You might like
PHP面向对象——访问修饰符介绍
2012/11/08 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
解析JavaScript中的标签语句
2013/06/19 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
2020/06/17 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
JavaScript中关于class的调用方法
2017/11/28 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
vue实现记事本功能
2019/06/26 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
python实现合并两个排序的链表
2019/03/03 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
Python print不能立即打印的解决方式
2020/02/19 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Python结合Window计划任务监测邮件的示例代码
2020/08/05 Python
Python ellipsis 的用法详解
2020/11/20 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
会议开场欢迎词
2014/01/15 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
教师工作总结范文2014
2014/11/10 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
oracle删除超过N天数据脚本的方法
2022/02/28 Oracle
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript
MySQL 原理与优化之Update 优化
2022/08/14 MySQL