js websocket 前后端基础实现

前端

// data
        wsUrl: 'ws://127.0.0.1:8080',
        websocket: null

// 初始化 websocket
initWebSocket () {
   
      try {
   
      if (this.websocket && this.websocket.readyState == 1) {
   
        this.stopWebSocket()
      }
       this.websocket = new WebSocket(this.wsUrl);
        this.websocket.onopen =  (evt) => {
   
        alert('open')
      };
StompJS是一个用于WebSocket通信的开源JavaScript库,用于实现前后端的实时交互。在前后端交互中,StompJS可以作为一个客户端,与后台的消息代理进行通信,发送和接收消息。 使用StompJS进行前后端交互的步骤如下: 1. 引入StompJS库,可以通过在项目中下载依赖的方式获取。 2. 在前端代码中创建一个Stomp Client对象,用于与后台建立连接。可以使用`Stomp.client(url)`方法创建一个Stomp Client对象,传入后台的WebSocket URL。 3. 使用Stomp Client对象的`connect(headers, connectCallback, errorCallback)`方法,与后台建立连接。`headers`参数可以用于传递任何需要的头部信息,`connectCallback`是连接成功后的回调函数,`errorCallback`是连接失败后的回调函数。 4. 连接成功后,可以使用Stomp Client对象的`subscribe(destination, callback, headers)`方法,订阅一个目标地址,接收后台发送过来的消息。`destination`参数是目标地址,`callback`是接收消息的回调函数,`headers`可以用于传递订阅时需要的头部信息。 5. 使用Stomp Client对象的`send(destination, headers, body)`方法,向后台发送消息。`destination`是目标地址,`headers`用于传递任何需要的头部信息,`body`是要发送的消息体。 通过使用StompJS库,前端可以与后台进行实时的消息交互,实现前后端的实时通信。这对于需要实时更新数据的应用场景非常有用。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [04- Vue基础前后端交互通信](https://blog.csdn.net/weixin_45583303/article/details/118340529)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Spring Boot WebSocket Vue 前后端分离实现消息通讯](https://blog.csdn.net/ch999999999999999999/article/details/102635322)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值