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 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
AngularJS入门教程(二):AngularJS模板
Dec 06 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
Aug 25 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
May 10 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
js实现砖头在页面拖拉效果
Nov 20 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
微信小程序 弹框和模态框实现代码
Mar 10 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
Apr 03 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对关联数组循环遍历的实现方法
2015/03/13 PHP
php备份数据库类分享
2015/04/14 PHP
Yii框架视图、视图布局、视图数据块操作示例
2019/10/14 PHP
js活用事件触发对象动作
2008/08/10 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
JS实现局部选择打印和局部不选择打印
2014/04/03 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
详解javascript高级定时器
2015/12/31 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
基于node.js制作简单爬虫教程
2017/06/29 Javascript
微信小程序实现添加手机联系人功能示例
2017/11/30 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
微信小程序实现选项卡效果
2018/11/06 Javascript
Angular脚手架开发的实现步骤
2019/04/09 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
javascript实现下拉菜单效果
2021/02/09 Javascript
[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访
2014/07/09 DOTA
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
Python入门篇之字典
2014/10/17 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
Python中模块string.py详解
2017/03/12 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
python 利用opencv实现图像网络传输
2020/11/12 Python
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
城建学院毕业生自荐信
2014/01/31 职场文书
关于建议书的格式范文
2014/05/20 职场文书
住房抵押登记委托书
2014/09/27 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2015年教师节贺卡寄语
2015/03/24 职场文书