vue Rscoket 几种方式

1、安装依赖

npm install --save rsocket-core@0.0.27
npm install --save rsocket-websocket-client@0.0.27

2、组件代码

<!--
 * @Author: your name
 * @Date: 2021-08-24 16:19:11
 * @LastEditTime: 2022-04-16 16:17:51
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \internetPlatform\src\views\iot\systemManage\test4.vue
-->
<template>
  <div>
    <el-form label-width="auto">
      <el-row>
        <el-row>
          <el-col :span="5">
            <el-form-item label="接收值：">
              <el-input v-model="rsFireAndForgetText" placeholder="" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-button type="success" @click="rsFireAndForgetClick">
            rsFireAndForget
          </el-button>
        </el-row>
        <el-col :span="5">
          <el-form-item label="接收值：">
            <el-input v-model="requestReponseText" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-button type="success" @click="requestReponseClick">
          requestResponse
        </el-button>
      </el-row>
      <el-row>
        <el-col :span="5">
          <el-form-item label="接收值：">
            <el-input v-model="requestStreamText" placeholder="" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-button type="success" @click="requestStreamClick">
          requestStream
        </el-button>
      </el-row>
    </el-form>
    <el-button type="success" @click="close">
      关闭
    </el-button>
  </div>
</template>

<script>
  // import {
  //   RSocketClient,
  //   JsonSerializer,
  //   IdentitySerializer,
  //   MESSAGE_RSOCKET_ROUTING,
  //   MESSAGE_RSOCKET_COMPOSITE_METADATA,
  //   BufferEncoders,
  //   TEXT_PLAIN,
  //   encodeCompositeMetadata,
  //   encodeRoute,
  // } from 'rsocket-core'
  import {
    RSocketClient,
    BufferEncoders,
    encodeCompositeMetadata,
    TEXT_PLAIN,
    MESSAGE_RSOCKET_COMPOSITE_METADATA,
    MESSAGE_RSOCKET_ROUTING,
    MESSAGE_RSOCKET_AUTHENTICATION,
    encodeRoute,
    encodeSimpleAuthMetadata,
  } from 'rsocket-core'
  import RSocketWebSocketClient from 'rsocket-websocket-client'
  import WebSocket from 'ws'
  export default {
    data() {
      return {
        client: null, //方式
        requestReponseText: '', //文本框的值
        requestStreamText: '',
        rsFireAndForgetText: '',
      }
    },
    created() {
      // //方式一
      // let requestResponseUrl = 'ws://10.1.30.49:7000/requestReponse'
      // // rsocket client
      // this.requestReponseClient = new RSocketClient({
      //   serializers: {
      //     data: JsonSerializer,
      //     metadata: IdentitySerializer,
      //   },
      //   setup: {
      //     keepAlive: 60000,
      //     lifetime: 180000,
      //     dataMimeType: 'application/json',
      //     metadataMimeType: 'message/x.rsocket.routing.v0',
      //   },
      //   transport: new RSocketWebSocketClient({
      //     url: requestResponseUrl,
      //   }),
      // })
      // // error handler
      // const errorHanlder = (e) => console.log(e)
      // // response handler
      // const responseHanlder = (payload) => {
      //   const li = document.createElement('li')
      //   li.innerText = payload.data
      //   li.classList.add('list-group-item', 'small')
      //   document.getElementById('result').appendChild(li)
      // }
      // // request to rsocket-websocket and response handling
      // const numberRequester = (socket, value) => {
      //   socket
      //     .requestStream({
      //       data: value,
      //       metadata: String.fromCharCode('number.stream'.length) + 'number.stream',
      //     })
      //     .subscribe({
      //       onError: errorHanlder,
      //       onNext: responseHanlder,
      //       onSubscribe: (subscription) => {
      //         subscription.request(100) // set it to some max value
      //       },
      //     })
      // }
      // const rsRequestResponse = (socket, msg) => {
      //   // requestResponse模式下，服务端会返回一个payload，在RSocketJS中用Single表示
      //   const single = socket.requestResponse({
      //     data: msg,
      //   })
      //   single.subscribe({
      //     onComplete: (payload) => {
      //       console.log('接收数据')
      //       console.info(`[requestResponse]${payload.data.msg}`)
      //     },
      //   })
      // }
      // // once the backend connection is established, register the event listeners
      // client.connect().then((socket) => {
      //   // document.getElementById('n').addEventListener('change', ({srcElement}) => {
      //   //     numberRequester(socket, parseInt(srcElement.value));
      //   // })
      //   rsRequestResponse(socket)
      // }, errorHanlder)
    },
    methods: {
      requestReponseClick() {
        //方式二
        const maxRSocketRequestN = 2147483647
        const keepAlive = 60000
        const lifetime = 180000
        const dataMimeType = 'application/octet-stream'
        const metadataMimeType = MESSAGE_RSOCKET_COMPOSITE_METADATA.string
        const route = 'rsFireAndForget'
        const client = new RSocketClient({
          setup: {
           keepAlive,
            lifetime,
            dataMimeType: 'application/json',
            metadataMimeType,
          },
          transport: new RSocketWebSocketClient(
            {
              debug: true,
              url: 'ws://10.1.30.49:7000/rsocket',
            },
            BufferEncoders
          ),
        })
        client.connect().then((socket) => {
          const single = socket.requestResponse({
            data: Buffer.from(JSON.stringify({ someData: 'Hello world!' })),
            metadata: encodeCompositeMetadata([[MESSAGE_RSOCKET_ROUTING, encodeRoute('requestResponse')]]),
          })
          single.subscribe({
            onComplete: (payload) => {
              console.log('结合reposne')
              console.info(`${payload.data}`)
            },
          })
        })
      },
      requestStreamClick() {
        //方式3
        const maxRSocketRequestN = 2147483647
        const keepAlive = 60000
        const lifetime = 180000
        const dataMimeType = 'application/octet-stream'
        const metadataMimeType = MESSAGE_RSOCKET_COMPOSITE_METADATA.string
        const route = 'stream'
        this.client = new RSocketClient({
          setup: {
            keepAlive,
            lifetime,
            dataMimeType: 'application/json',
            metadataMimeType,
            // payload: {
            //   metadata: encodeCompositeMetadata([
            //     [TEXT_PLAIN, Buffer.from('Hello World')],
            //     [MESSAGE_RSOCKET_ROUTING, encodeRoute(route)],
            //   ]),
            // },
          },
          transport: new RSocketWebSocketClient(
            {
              debug: true,
              url: 'ws://10.1.30.49:7000/rsocket',
            },
            BufferEncoders
          ),
        })
        this.client.connect().then((socket) => {
          console.log('建立连接！')
          let rsRequestStream = (msg) => {
            socket
              .requestStream({
                data: Buffer.from(JSON.stringify(msg)),
                metadata: encodeCompositeMetadata([[MESSAGE_RSOCKET_ROUTING, encodeRoute('stream')]]),
              })
              .subscribe({
                onNext: (payload) => {
                  console.log('接收数据')
                  console.log(payload.data)
                },
                onComplete: (payload) => {
                  console.log('完成接收')
                },
                onError: () => {
                  console.log('传输失败!')
                },
                // requestStream时，数据是懒发送的，只有在返回的Flowable被订阅，并且被request(n)请求数据之后才发送
                // 因此这里还需要request一下
                onSubscribe: (s) => {
                  s.request(1000 ^ 1024) // 0x7fffffff
                },
              })
          }
          rsRequestStream({ stock: 'xmm', id: 333 })
          // socket
          //   .requestStream({
          //     data: Buffer.from('Hello World'),
          //     metadata: encodeCompositeMetadata([
          //       [TEXT_PLAIN, Buffer.from('Hello World')],
          //       [MESSAGE_RSOCKET_ROUTING, encodeRoute(route)],
          //     ]),
          //   })
          //   .subscribe({
          //     // onNext: (payload) => {
          //     //   //console.info(`[requestStream]${payload.data.msg}`)
          //     // },
          //     onComplete: () => {
          //       console.log('接收数据')
          //       console.log(payload.data)
          //     },
          //     onError: () => {
          //       // debugger
          //     },
          //     // requestStream时，数据是懒发送的，只有在返回的Flowable被订阅，并且被request(n)请求数据之后才发送
          //     // 因此这里还需要request一下
          //     onSubscribe: (s) => {
          //       s.request(INT32_MAX) // 0x7fffffff
          //     },
          //   })
        })
      },
      close() {
        //关闭

        this.client.close()
        this.client = null
      },
      rsFireAndForgetClick() {
        //方式一
        const maxRSocketRequestN = 2147483647
        const keepAlive = 60000
        const lifetime = 180000
        const dataMimeType = 'application/octet-stream'
        const metadataMimeType = MESSAGE_RSOCKET_COMPOSITE_METADATA.string
        const route = 'rsFireAndForget'
        const client = new RSocketClient({
          setup: {
            dataMimeType,
            keepAlive,
            lifetime,
            metadataMimeType,
          },
          transport: new RSocketWebSocketClient(
            {
              debug: true,
              url: 'ws://10.1.30.49:7000/rsocket',
            },
            BufferEncoders
          ),
        })
        console.log('带作用')
        client.connect().then((socket) => {
          console.log('连接成功！')
          socket.fireAndForget({
            data: Buffer.from(JSON.stringify({ someData: 'Hello world!' })),
            metadata: encodeCompositeMetadata([[MESSAGE_RSOCKET_ROUTING, encodeRoute('rsFireAndForget')]]),
          })
        })
      },
    },
  }
</script>

<style lang="scss" scoped></style>