websock使用 (可理解为:一次访问多次接收 监听后台返回值 后台直接推送)

websock使用

  • websock 与 http所用的传输协议不一致,所以编写方式也不相同
  • ws等同于http,wss等同于https (本人这么理解,也为了方便记忆)
  • 后台可直接推送消息向前台,前台可以拿到后台给的数据,在浏览器控制台Network => ws 也可看见返回的信息

代码分享

👍记得点赞哦 😄

👇大佬请看👇

  let websock; //在script标签内 定义websock变量
 // 初始化websock
   initWebSocket(){
    // const interface= `wss://接口(后台同学提供)` // 这里对应的是https格式
    // const interface= `ws://接口(后台同学提供)` // 这里对应的是http格式
    websock=new WebSocket(interface);
    websock.onopen = this.websocketOpen(); //(建立连接)
    	//this.websocketOpen() 为function方法 也可直接写 websock.onopen = function(e){}
    websock.onmessage = this.websocketMessage(); // (有websock数据时的处理逻辑) //同上
    websock.onerror = this.websockeTError(); //(连接失败或报错)//同上
    websock.onclose = this.websocketClose();  //(关闭连接)//同上
  },
//  另外可以使用 websock.send(data);模拟发送数据
  
// 在需要的地方直接调用即可 例如vue可在生命周期created中调用,在页面加载可访问时便开始准备接收 

都看👓完了,就👍1️⃣👇吧

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 可以使用 websocket 在前后端进行实时通信。要在 Java 中实现 websocket,可以使用 Java API for WebSocket(JSR 356)。 要在 Vue 中使用 websocket,可以使用第三方库,例如 vue-socket.io。 示例代码: Java 服务端: ```java import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; @ServerEndpoint("/websocket") public class WebSocketServer { @OnOpen public void onOpen(Session session) { System.out.println("Open a new session: " + session.getId()); } @OnMessage public void onMessage(String message, Session session) { System.out.println("Receive a message: " + message); } @OnClose public void onClose(Session session) { System.out.println("Close a session: " + session.getId()); } } ``` Vue 客户端: ```javascript import Vue from 'vue'; import VueSocketIO from 'vue-socket.io'; Vue.use(new VueSocketIO({ debug: true, connection: 'http://localhost:8080/websocket', })); new Vue({ el: '#app', data: { message: '', }, methods: { sendMessage() { this.$socket.emit('send message', this.message); this.message = ''; }, }, }); ``` 在这个示例中,Java 服务端会监听 `/websocket` 路径,Vue 客户端会连接到这个路径。当 Vue 客户端调用 `sendMessage` 方法时,会向服务端发送 `send message` 事件,服务端会收到并打印消息。 ### 回答2: 使用WebSocket可以实现实时消息推送功能。下面是使用Java和Vue实现后台消息推送的简单流程: 1. 后台Java实现: 首先,需要创建一个WebSocket处理器类,可以使用Java中的WebSocket API或开源库(如Spring WebSocket)来简化实现。 在WebSocket处理器类中,需要定义连接建立、断开和接收消息等方法,并添加注解以映射监听的消息路径,并处理相应的业务逻辑。 2. 前端Vue实现: 在Vue中,可以使用WebSocket对象来与后台建立连接,并监听消息的到达。 需要在Vue的钩子函数中创建WebSocket对象,并注册回调函数处理后台发送的消息。 当收到消息时,可以将其展示在前端页面的相应位置。 3. 后台推送消息: 在后台的相关业务逻辑中,可以通过WebSocket的连接向前端发送消息。 可以在需要推送消息的地方,通过获取对应的WebSocket连接,并使用WebSocket对象的send方法将消息发送前端。 需要注意的是,WebSocket是基于TCP协议的全双工通信协议,所以需要确保后台服务器和前端浏览器都支持WebSocket。 以上是一个简单的实现示例,实际项目中还需要根据具体需求进行扩展和优化。希望能帮到你! ### 回答3: 要使用WebSocket实现后台消息推送,需要进行以下步骤: 1. 在后台使用Java语言创建WebSocket服务器。可以使用Java内置的WebSocket API或者第三方库,如Tomcat的WebSocket实现等。具体方式可以通过搜索相关教程了解。 2. 在Vue前端应用中,使用WebSocket连接到后台服务器。可以使用Vue插件,如vue-native-websocket或者自己编写相关逻辑。具体方式可以通过搜索相关教程了解。 3. 后台服务器接收Vue前端应用的WebSocket连接请求,并处理连接逻辑。 4. 在后台服务器向Vue前端应用发送消息时,通过WebSocket向已连接的Vue客户端发送消息。后台服务器可以根据消息类型和接收者,选择性地发送消息给指定的客户端。 5. Vue前端应用接收后台服务器发送的消息后,进行逻辑处理,如显示消息内容或者执行其他相应操作。 需要注意以下几点: 1. 后台服务器需要保持WebSocket连接的活跃性,以便随时向前端应用发送消息。可以使用定时任务或者其他方式来检测和维持连接。 2. Vue前端应用需要在合适的时机关闭WebSocket连接,以释放资源。可以在Vue组件的生命周期钩子函数中处理关闭连接的逻辑。 总之,通过WebSocket实现后台消息推送,涉及到后台服务器的建立和维护,以及前端应用的连接和消息处理。可以根据实际需求选择合适的技术和工具,完成消息推送功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值