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 相关文章推荐
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
JS逆序遍历实现代码
Dec 02 Javascript
javascript每日必学之运算符
Feb 16 Javascript
jQuery实现简单滚动动画效果
Apr 07 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
详解webpack和webpack-simple中如何引入css文件
Jun 28 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
Aug 09 Javascript
详解Vue源码中一些util函数
Apr 24 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 jQuery
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 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 之 没有mysql支持时的替代方案
2006/10/09 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
浅谈php serialize()与unserialize()的用法
2013/06/05 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
关于javascript中this关键字(翻译+自我理解)
2010/10/20 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
jquery获取复选框被选中的值
2014/04/10 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
javascript 缓冲运动框架的实现
2017/09/29 Javascript
Vue开发环境中修改端口号的实现方法
2019/08/15 Javascript
微信小程序拖拽排序列表的示例代码
2020/07/08 Javascript
Python urlopen 使用小示例
2008/09/06 Python
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python的turtle库使用详解
2019/05/10 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
Java基础知识面试要点
2016/07/29 面试题
Linux内核产生并发的原因
2012/07/13 面试题
运动会拉拉队口号
2014/06/09 职场文书
学生自我评语
2015/01/04 职场文书
商业计划书格式、范文
2019/03/21 职场文书
selenium.webdriver中add_argument方法常用参数表
2021/04/08 Python
React配置子路由的实现
2021/06/03 Javascript