java加vue使用websocket_Vue+Java 通过websocket实现服务器与客户端双向通信操作

本文详细介绍了如何使用Vue和Java通过WebSocket实现服务器与客户端的双向通信。在Vue端,创建并初始化WebSocket,定义发送和接收数据的方法;在Java端,使用@ServerEndpoint注解设置WebSocket端点,并实现连接打开、关闭、接收到消息时的处理方法。通过WebSocket对象,可以在其他Java类中向所有客户端或特定客户端发送数据。
摘要由CSDN通过智能技术生成

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

jwmzaehk5cm.jpg

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 clients = new ConcurrentHashMap();

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 getClients() {

return clients;

}

}

在项目别的类可通过new WebSocket()向客户端发送数据

WebSocket ws = new WebSocket();

ws.sendMessageAll(JSON.toJSONString(rs));

以上这篇Vue+Java 通过websocket实现服务器与客户端双向通信操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持聚米学院。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值