精华内容
下载资源
问答
  • 之前写了一篇微信小程序使用MQTT over WebSocket连接阿里云IoT物联网平台,介绍了如何使用mqtt.js在微信小程序上连接mqtt服务器,文中顺提了mqtt.js是支持支付宝小程序的,但是我本人没有实际编写过,后来有小伙伴...

    前言

    之前写了一篇微信小程序使用MQTT over WebSocket连接阿里云IoT物联网平台,介绍了如何使用mqtt.js在微信小程序上连接mqtt服务器,文中顺带提了mqtt.js是支持支付宝小程序的,但是我本人没有实际编写过,后来有小伙伴来问我相关的问题,正好有空,于是稍微研究了一下,踩了不少坑,最后连接上了,以此记录,希望能给后来人一点帮助。

    坑点

    1. 支付宝小程序和开发工具环境目前差距挺大,有时候开发工具能跑到真机就GG
    2. 支付宝mqtt.js连接参数要传入一个my(mqtt.js文档里没写这点,看了源码才懂)
    3. 由于支付宝小程序底层变动,以及最新mqtt.js(v4.2.0)版本的改动,导致mqtt.js当前版本v4.2.0未支持支付宝小程序(有人提交了PR,但是没有后续,没合并)

    综上所述,如果当前你想在支付宝小程序上使用mqtt.js,只能等合并pr发布的新版本,或者自己下载源码修改编译(注意:开发工具要最新版本,否则会报错FileReader is not constructor(当前v1.13.7)

    修改源码步骤:

    1. 首先git clone https://github.com/mqttjs/MQTT.js.git 把源码下到本地
    2. 修改入口的判断,及PR#1135改动的部分
      对应文件 :lib/connect/index.js
    if ((typeof process !== 'undefined' && process.title !== 'browser') || typeof __webpack_require__ === 'function') {
      protocols.mqtt = require('./tcp')	  protocols.mqtt = require('./tcp')
      protocols.tcp = require('./tcp')	  protocols.tcp = require('./tcp')
      protocols.ssl = require('./tls')	  protocols.ssl = require('./tls')
    

    改成(即把 typeof webpack_require === ‘function’ 条件去掉)

    if ((typeof process !== 'undefined' && process.title !== 'browser') ) {
      protocols.mqtt = require('./tcp')	  protocols.mqtt = require('./tcp')
      protocols.tcp = require('./tcp')	  protocols.tcp = require('./tcp')
      protocols.ssl = require('./tls')	  protocols.ssl = require('./tls')
    

    对应文件:lib/connect/ws.js

    // eslint-disable-next-line camelcase
    
    var IS_BROWSER = (typeof process !== 'undefined' && process.title === 'browser') || typeof __webpack_require__ === 'function'
    

    改成(同样去掉 typeof webpack_require === ‘function’ 条件),这个地方其实改不改都可以

    // eslint-disable-next-line camelcase
    
    var IS_BROWSER = (typeof process !== 'undefined' && process.title === 'browser')
    
    1. 修改支持支付宝小程序协议部分(对照PR修改即可)
      对应文件:lib/connect/ali.js 修改完成如下
    'use strict'
    
    var Transform = require('readable-stream').Transform
    var duplexify = require('duplexify')
    var base64 = require('base64-js')
    
    /* global FileReader */
    var my
    var proxy
    var stream
    var isInitialized = false
    
    function buildProxy () {
      var proxy = new Transform()
      proxy._write = function (chunk, encoding, next) {
        const _data = chunk.toString('base64'); //订正mqttjs支付宝小程序使用错误,支付宝data需要传入base64 string
        my.sendSocketMessage({
          data: _data,
          isBuffer: 1,
          success: function () {
            next()
          },
          fail: function () {
            next(new Error())
          }
        })
      }
      proxy._flush = function socketEnd (done) {
        my.closeSocket({
          success: function () {
            done()
          }
        })
      }
    
      return proxy
    }
    
    function setDefaultOpts (opts) {
      if (!opts.hostname) {
        opts.hostname = 'localhost'
      }
      if (!opts.path) {
        opts.path = '/'
      }
    
      if (!opts.wsOptions) {
        opts.wsOptions = {}
      }
    }
    
    function buildUrl (opts, client) {
      var protocol = opts.protocol === 'alis' ? 'wss' : 'ws'
      var url = protocol + '://' + opts.hostname + opts.path
      if (opts.port && opts.port !== 80 && opts.port !== 443) {
        url = protocol + '://' + opts.hostname + ':' + opts.port + opts.path
      }
      if (typeof (opts.transformWsUrl) === 'function') {
        url = opts.transformWsUrl(url, opts, client)
      }
      return url
    }
    
    function bindEventHandler () {
      if (isInitialized) return
    
      isInitialized = true
    
      my.onSocketOpen(function () {
        stream.setReadable(proxy)
        stream.setWritable(proxy)
        stream.emit('connect')
      })
    
      my.onSocketMessage(function (res) {
        if (typeof res.data === 'string') {
          var array = base64.toByteArray(res.data)
          var buffer = Buffer.from(array)
          proxy.push(buffer)
        } else {
          var reader = new FileReader()
          reader.addEventListener('load', function () {
            var data = reader.result
    
            if (data instanceof ArrayBuffer) data = Buffer.from(data)
            else data = Buffer.from(data, 'utf8')
            proxy.push(data)
          })
          reader.readAsArrayBuffer(res.data)
        }
      })
    
      my.onSocketClose(function () {
        stream.end()
        stream.destroy()
      })
    
      my.onSocketError(function (res) {
        stream.destroy(res)
      })
    }
    
    function buildStream (client, opts) {
      opts.hostname = opts.hostname || opts.host
    
      if (!opts.hostname) {
        throw new Error('Could not determine host. Specify host manually.')
      }
    
      var websocketSubProtocol =
        (opts.protocolId === 'MQIsdp') && (opts.protocolVersion === 3)
          ? 'mqttv3.1'
          : 'mqtt'
    
      setDefaultOpts(opts)
    
      var url = buildUrl(opts, client)
      my = opts.my
      my.connectSocket({
        url: url,
        headers : {
          "Sec-WebSocket-Protocol" : "mqtt"
        }
      })
    
      proxy = buildProxy()
      stream = duplexify.obj()
    
      bindEventHandler()
    
      return stream
    }
    
    module.exports = buildStream
    
    

    修改完成之后,执行npm install等待编译完成即可在dist目录下看到两个文件:mqtt.js 和mqtt.min.js,前一个是未压缩版本,有日志输出,可以用来调试,后一个是压缩版本,线上环境使用

    当然你要是嫌麻烦,可以用我已经编译好的mqtt.js

    准备工作(这一步基本就和微信小程序没啥大的区别了)

    1. 自己编译或者下载我上面已经编译好的mqtt.js包
    2. 官方库aliyun-iot-client-sdk下载hmac-sha1算法库hex_hmac_sha1.js(当然也可以使用其他的库,比如crypto-js),点击打开链接然后右键另存为即可
    3. 下载支付宝小程序开发工具,新建任意项目
    4. 拷贝mqtt.min.js和hex_hmac_sha1.js到utils目录中去
    5. 可能支付宝还有其他配置,具体自己看文档了

    开始编码

    随便在一个页面的js文件中加入以下代码,注意替换参数为自己产品和设备的参数

    const crypto = require('../../utils/hex_hmac_sha1.js'); //根据自己存放的路径修改
    import {connect} from '../../utils/mqtt.min.js' //根据自己存放的路径修改
    
    // 获取全局 app 实例
    const app = getApp();
    // 数据管理器
    let conn = null;
    
    Page({
      // 声明页面数据
      data: {
        dataLoaded: false,
        tasks: [],
        taskHandlers: [],
        taskCheckers: [],
        info:'看看',
        message:''
      },
    
      // 监听生命周期回调 onLoad
      onLoad() {
        
      },
      // 监听生命周期回调 onShow
      onShow() {
        // 同步全局数据到本地
        //this.loadData();
      },
    
      onHide() {
        // TODO: 清理注册事件
      },
    onTap(){
      this.doConnect();
    },
     doConnect(){
        const deviceConfig = {
          productKey: "替换",
          deviceName: "替换",
          deviceSecret: "替换",
          regionId: "替换"
        };
        const options = this.initMqttOptions(deviceConfig);
        console.log(options)
        //替换productKey为你自己的产品的(注意这里是wxs,不是wss,否则你可能会碰到ws不是构造函数的错误)
        const client = connect(`alis://${deviceConfig.productKey}.iot-as-mqtt.${deviceConfig.regionId}.aliyuncs.com`,options)
    
        this.setData({
          info:"开始连接.."
        })
        client.on('connect',  ()=> {
          console.log('连接服务器成功')
          this.setData({
            info:"连接服务器成功"
          })
          //订阅主题,替换productKey和deviceName(这里的主题可能会不一样,具体请查看后台设备Topic列表或使用自定义主题)
          client.subscribe(`/${deviceConfig.productKey}/${deviceConfig.deviceName}/get`, function (err) {
            if (!err) {
               console.log('订阅成功!');
            }
          })
        })
    	//接收消息监听
        client.on('message',  (topic, message) =>{
          // message is Buffer
          console.log('收到消息:'+message.toString())
          this.setData({
            message:message.toString()
          })
         //关闭连接 client.end()
        })
      },
      //IoT平台mqtt连接参数初始化
     initMqttOptions(deviceConfig) {
    
        const params = {
          productKey: deviceConfig.productKey,
          deviceName: deviceConfig.deviceName,
          timestamp: Date.now(),
          clientId: Math.random().toString(36).substr(2),
        }
        //CONNECT参数
        const options = {
          keepalive: 60, //60s
          clean: true, //cleanSession不保持持久会话
          protocolVersion: 4 ,//MQTT v3.1.1
          my:my //注意这里的my
        }
        //1.生成clientId,username,password
        options.password = this.signHmacSha1(params, deviceConfig.deviceSecret);
        options.clientId = `${params.clientId}|securemode=2,signmethod=hmacsha1,timestamp=${params.timestamp}|`;
        options.username = `${params.deviceName}&${params.productKey}`;
    
        return options;
      },
    
    /*
      生成基于HmacSha1的password
      参考文档:https://help.aliyun.com/document_detail/73742.html?#h2-url-1
    */
     signHmacSha1(params, deviceSecret) {
    
        let keys = Object.keys(params).sort();
        // 按字典序排序
        keys = keys.sort();
        const list = [];
        keys.map((key) => {
          list.push(`${key}${params[key]}`);
        });
        const contentStr = list.join('');
        return crypto.hex_hmac_sha1(deviceSecret, contentStr);
      }
    });
    
    
    

    运行代码,点击连接即可看到
    在这里插入图片描述
    在这里插入图片描述
    至此支付宝小程序使用mqtt.js连接服务器已完成,更多信息可以参考

    微信小程序使用MQTT over WebSocket连接阿里云IoT物联网平台

    有疑问可以加我QQ:343672271 (备注mqtt)

    2020年9月15日 补充:

    mqttv4.2.0在模拟器和android机上中文显示正常,但是在苹果机上会乱码,需要自行修改源码ali.js接收数据解码部分,即改成:

     my.onSocketMessage(function (res) {
        if(res.isBuffer){
          let buff=new Buffer.from(res.data,'base64');
          proxy.push(buff);
        }else if (typeof res.data === 'string') {
          var array = base64.toByteArray(res.data)
          var buffer = Buffer.from(array)
          proxy.push(buffer)
        } else {
          var reader = new FileReader()
          reader.addEventListener('load', function () {
            var data = reader.result
    
            if (data instanceof ArrayBuffer) data = Buffer.from(data)
            else data = Buffer.from(data, 'utf8')
            proxy.push(data)
          })
          reader.readAsArrayBuffer(res.data)
        }
      })
    

    增加了其他的解码方式:

    if(res.isBuffer){
          let buff=new Buffer.from(res.data,'base64');
          proxy.push(buff);
        }
    

    本解决方案由小伙伴无疆(QQ昵称)提供,本人作为搬运工,编译好了一个版本mqtt.js,不想自己编译的小伙伴自行下载。

    展开全文
  • 在安装完php的socket扩展后就可以使用php自带的各种socket函数了先学习一下各个函数的相关参数和使用方法比如我已经知道了一个服务器是可以通过websocket连接的 其域名是192.168.15.192 端口号是9001可用用打电话的...

    在安装完php的socket扩展后就可以使用php自带的各种socket函数了

    先学习一下各个函数的相关参数和使用方法

    比如我已经知道了一个服务器是可以通过websocket连接的 其域名是192.168.15.192 端口号是9001

    可用用打电话的步骤理解socket的连接方式


    1. ## 首先 打电话时 连接双方都要有电话机; socket就要求双方都有socket号 也就是域名; 

    $socket_create = socket_create($domain, $type, $protocal); ## 资源类型

    $error = socket_last_error($socket_create); ## 如果连接成功则为int(0) 连接失败会返回错误码

    $strerror = socket_strerror($error) ## 读取错误的文本说明

       ## 放上官方说明这个函数的链接 http://php.net/manual/en/function.socket-create.php

       ## 第一个参数$domain是指定套接字要使用的协议

        可选这三种,我用的是第一种AF_INET:

        AF_INET 基于IPv4的互联网协议

        AF_INET6 IPv6基于internet的协议

        AF_UNIX 本地通信协议

      ## 第二个参数$type是连接方式

        可选这五种,我用的是第一种SOCK_STREAM:

        SOCK_STREAM 提供顺序的套接字 TCP协议基于此类型

        SOCK_DGRAM 支持数据包 UDP协议基于此类型

        SOCK_SEQPACKET 为固定最大长度数据报提供有序传输 每次呼叫时读取整个数据包

        SOCK_RAW 提供原始的网络协议访问 可以用户手动构建任何协议 常用于执行ICMP请求(如终端ping请求)

        SOCK_RDM 不保证排序可靠 

      ## 第三个参数$protocal是设置指定的特定协议domain; 可以调用getprotobyname($name)检索值,$name 是string 可以是 "ip","icmp","ggp","tcp","egp","pup","udp","hmp","xns-idp","rdp","rvd",我用的是getprotobyname("tcp"),返回了6,对应的正是SOL_TCP这个常量.

        第三个参数应该就2种,我也不知道为什么有那么多$name:

        SOL_TCP ## 我就是用这个常量测试成功的

        SOL_UDP ## 没试过 请自行谷歌...

        其他常量可以参考官方的常量定义手册 http://php.net/manual/en/sockets.constants.php


    2. 向对方拨号呼叫; 相当于发出连接请求

    $result = socket_connect($socket_create, "192.168.15.192", "9001");

    ## 三个参数 第一个写socket_create的资源 第二个写域名 第三个写端口号


    3. 读取信息

    while($out = socket_read($create_socket, $length)){

    var_dump($out);

    }

    ## socket_read至少是2个参数

    第一个参数是create_socket资源

    第二个参数写你想要接收的数据长度 单位是字节

    第三个参数是类型 可以不写 默认是PHP_BINARY_READ这个常量


    以上就是php连接websocket的方法.

    但是在实际使用过程中,浏览器页面经常无法正常读取信息.或许可以用swoole改进连接.

    展开全文
  • 2019-7-11 新增URL参数支持,并解决了参URL导致的连接自动断开问题,感谢大家的支持。 MAVEN依赖 <dependencies> <!-- https://mvnrepository.com/artifact/io.netty/netty-all --> <dependency...

    关于Netty
    Netty 是一个利用 Java 的高级网络的能力,隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架。

    更新
    2019-7-11 新增URL参数支持,并解决了带参URL导致的连接自动断开问题,感谢大家的支持。
    MAVEN依赖
        <dependencies>
            <!-- https://mvnrepository.com/artifact/io.netty/netty-all -->
            <dependency>
                <groupId>io.netty</groupId>
                <artifactId>netty-all</artifactId>
                <version>4.1.36.Final</version>
            </dependency>

        </dependencies>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    SpringBootApplication
    启动器中需要new一个NettyServer,并显式调用启动netty。

    @SpringBootApplication
    public class SpringCloudStudyDemoApplication {
        public static void main(String[] args) {
            SpringApplication.run(SpringCloudStudyDemoApplication.class,args);
            try {
                new NettyServer(12345).start();
                System.out.println("https://blog.csdn.net/moshowgame");
                System.out.println("http://127.0.0.1:6688/netty-websocket/index");
            }catch(Exception e) {
                System.out.println("NettyServerError:"+e.getMessage());
            }
        }
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    NettyServer
    启动的NettyServer,这里进行配置

    /**
     * NettyServer Netty服务器配置
     * @author zhengkai.blog.csdn.net
     * @date 2019-06-12
     */
    public class NettyServer {
        private final int port;
     
        public NettyServer(int port) {
            this.port = port;
        }
     
        public void start() throws Exception {
            EventLoopGroup bossGroup = new NioEventLoopGroup();
     
            EventLoopGroup group = new NioEventLoopGroup();
            try {
                ServerBootstrap sb = new ServerBootstrap();
                sb.option(ChannelOption.SO_BACKLOG, 1024);
                sb.group(group, bossGroup) // 绑定线程池
                        .channel(NioServerSocketChannel.class) // 指定使用的channel
                        .localAddress(this.port)// 绑定监听端口
                        .childHandler(new ChannelInitializer<SocketChannel>() { // 绑定客户端连接时候触发操作
     
                            @Override
                            protected void initChannel(SocketChannel ch) throws Exception {
                                System.out.println("收到新连接");
                                //websocket协议本身是基于http协议的,所以这边也要使用http解编码器
                                ch.pipeline().addLast(new HttpServerCodec());
                                //以块的方式来写的处理器
                                ch.pipeline().addLast(new ChunkedWriteHandler());
                                ch.pipeline().addLast(new HttpObjectAggregator(8192));
                                ch.pipeline().addLast(new WebSocketServerProtocolHandler("/ws", null, true, 65536 * 10));
                                ch.pipeline().addLast(new MyWebSocketHandler());
                            }
                        });
                ChannelFuture cf = sb.bind().sync(); // 服务器异步创建绑定
                System.out.println(NettyServer.class + " 启动正在监听: " + cf.channel().localAddress());
                cf.channel().closeFuture().sync(); // 关闭服务器通道
            } finally {
                group.shutdownGracefully().sync(); // 释放线程池资源
                bossGroup.shutdownGracefully().sync();
            }
        }
    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    MyChannelHandlerPool
    通道组池,管理所有websocket连接

    /**
     * MyChannelHandlerPool
     * 通道组池,管理所有websocket连接
     * @author zhengkai.blog.csdn.net
     * @date 2019-06-12
     */
    public class MyChannelHandlerPool {

        public MyChannelHandlerPool(){}

        public static ChannelGroup channelGroup = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);

    }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    MyWebSocketHandler
    处理ws一下几种情况:

    channelActive与客户端建立连接
    channelInactive与客户端断开连接
    channelRead0客户端发送消息处理
    /**
     * NettyServer Netty服务器配置
     * @author zhengkai.blog.csdn.net
     * @date 2019-06-12
     */
    public class NettyServer {
        private final int port;
     
        public NettyServer(int port) {
            this.port = port;
        }
     
        public void start() throws Exception {
            EventLoopGroup bossGroup = new NioEventLoopGroup();
     
            EventLoopGroup group = new NioEventLoopGroup();
            try {
                ServerBootstrap sb = new ServerBootstrap();
                sb.option(ChannelOption.SO_BACKLOG, 1024);
                sb.group(group, bossGroup) // 绑定线程池
                        .channel(NioServerSocketChannel.class) // 指定使用的channel
                        .localAddress(this.port)// 绑定监听端口
                        .childHandler(new ChannelInitializer<SocketChannel>() { // 绑定客户端连接时候触发操作
     
                            @Override
                            protected void initChannel(SocketChannel ch) throws Exception {
                                System.out.println("收到新连接");
                                //websocket协议本身是基于http协议的,所以这边也要使用http解编码器
                                ch.pipeline().addLast(new HttpServerCodec());
                                //以块的方式来写的处理器
                                ch.pipeline().addLast(new ChunkedWriteHandler());
                                ch.pipeline().addLast(new HttpObjectAggregator(8192));
                                ch.pipeline().addLast(new WebSocketServerProtocolHandler("/ws", "WebSocket", true, 65536 * 10));
                                ch.pipeline().addLast(new MyWebSocketHandler());
                            }
                        });
                ChannelFuture cf = sb.bind().sync(); // 服务器异步创建绑定
                System.out.println(NettyServer.class + " 启动正在监听: " + cf.channel().localAddress());
                cf.channel().closeFuture().sync(); // 关闭服务器通道
            } finally {
                group.shutdownGracefully().sync(); // 释放线程池资源
                bossGroup.shutdownGracefully().sync();
            }
        }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    socket.html
    主要是连接ws,发送消息,以及消息反馈

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Netty-Websocket</title>
        <script type="text/javascript">
            // by zhengkai.blog.csdn.net
            var socket;
            if(!window.WebSocket){
                window.WebSocket = window.MozWebSocket;
            }
            if(window.WebSocket){
                socket = new WebSocket("ws://127.0.0.1:12345/ws");
                socket.onmessage = function(event){
                    var ta = document.getElementById('responseText');
                    ta.value += event.data+"\r\n";
                };
                socket.onopen = function(event){
                    var ta = document.getElementById('responseText');
                    ta.value = "Netty-WebSocket服务器。。。。。。连接  \r\n";
                };
                socket.onclose = function(event){
                    var ta = document.getElementById('responseText');
                    ta.value = "Netty-WebSocket服务器。。。。。。关闭 \r\n";
                };
            }else{
                alert("您的浏览器不支持WebSocket协议!");
            }
            function send(message){
                if(!window.WebSocket){return;}
                if(socket.readyState == WebSocket.OPEN){
                    socket.send(message);
                }else{
                    alert("WebSocket 连接没有建立成功!");
                }
     
            }
     
        </script>
    </head>
    <body>
    <form onSubmit="return false;">
        <label>ID</label><input type="text" name="uid" value="${uid!!}" /> <br />
        <label>TEXT</label><input type="text" name="message" value="这里输入消息" /> <br />
        <br /> <input type="button" value="发送ws消息"
                      onClick="send(this.form.uid.value+':'+this.form.message.value)" />
        <hr color="black" />
        <h3>服务端返回的应答消息</h3>
        <textarea id="responseText" style="width: 1024px;height: 300px;"></textarea>
    </form>
    </body>
    </html>

     

     

     

    文章标签: springboot websocket springboot netty websocket ttnerry websocket netty实现websocket
    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
    本文链接:https://zhengkai.blog.csdn.net/article/details/91552993
    ————————————————
    版权声明:本文为CSDN博主「Moshow郑锴」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://zhengkai.blog.csdn.net/article/details/91552993

    展开全文
  •  二、主要代码解读:1、申请一个WebSocket对象参数是需要连接的服务器端的地址,同http协议使用http://开头一样,WebSocket协议的URL使用ws://开头,另外安全的WebSocket协议使用wss://开头。2、WebSocket对象一共...
  •  websocket 的实例化方法,两个参数,第一个是url,即客户端请求连接服务器的地址和指定的端口。第二个参数是protocol,这个参数会在后续的demo中讲解。【事件监听】onopen 当服务器响应了客户端的连接请求并且...

    【实例化方法】

    var ws = new WebSocket("ws://www.liumumu.top:8181");

        websocket 的实例化方法,带两个参数,第一个是url,即客户端请求连接服务器的地址和指定的端口。第二个参数是protocol,这个参数会在后续的demo中讲解。

    【事件监听】

    onopen

        当服务器响应了客户端的连接请求并且握手成功,连接建立,促发onopen回调函数,所以数据在服务器与客户端的传递,必须在onopen回调函数被调用之后。

    onmessage

        当连接建立之后,客户端就可以发送数据到服务器端,同时也可以接收到服务器端发送过来的数据。onmessage api 就是当客户端接收到服务器发送过来的数据是,对数据进行处理的方法。

    onerror

       当一个错误发生时,onerror方法就会被促发。比如,客户端发送连接请求,服务器端没有响应。

    onclose

       当服务器和客户端的连接断开时,会出发onclose方法。

    【其他方法】

    close(code,reason)

        客户端主动断开websocket连接。

        参数code int,定义断开连接的错误码,可选,默认为1000。可以传递的数值有1000,3000,4999.如果传递其他数字,会报一下错误:


        tips:如果是服务器主动断开连接,错误码为1006。

        参数reason string ,定义关闭原因,可选,默认为空。

    【属性】

    readyState

        获取websocket连接状态,只读属性,属性值如下表所示,




        当客户端试图发送数据给服务器时,可以先通过readyState判断连接状态。

    bufferedAmount

        获取最近一次发送的数据长度,最大524288

    protocol

        协议。初始化websocket时,传递的第一个参数。后面的demo会做进一步解释。


    展开全文
  • 卷曲 命令行WebSocket测试器。 利用 需要2个命令行参数连接到的网址 有查询参数的json的路径 之后,输入json文件的路径。 该文件的内容将通过websocket发送。 收到的消息将被打印到终端。
  • WebSocket在Client的基本使用

    千次阅读 2020-06-03 10:12:14
    const ws = new WebSocket('ws://localhost:8080/可以请求参数'); //ws的基本回调函数 ws.onopen = function(){};//连接成功 ws.onerror = function(){};//连接出现错误 ws.onmessage = function(event){ console....
  • 注解式配置//示例代码@ServerEndpoint("/chat")public class Chat{//建立连接时调用,可传入的参数Session(WebSocket的Session,在SpringWebSocket里面则是WebSocketSession),EndpointConfig,和@...
  • 一、websocket与http http是基于短连接的,无法实现长...第一次请求头会着两个参数,告诉服务器,协议要升级。 服务端确认并返回后,就升级(与http无关了) Upgrade: websocket Connection: Upgrade 二、Websocket的作
  • 微信扫码登录网站代码篇mavenapplication.ymlWeChatProperties.javaSHA1.javaWeChatUtils.javaWeChatService.javaApiWeChatController.java详细讲解篇官方..._token生成带参数的二维码长链接转短连接接收事件推送...
  • 如果声明了多个相同id 的mqtt-client ,则只有有host和port参数的一个管理连接,另一个只引用那个。 请参阅分隔元素。 例子 以下代码实例化元素并自动连接到代理: < mqtt-client id =" myclient " host...
  • 这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录。大体流程如下: 客户端打开登录界面,连接WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户扫描...
  • 这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录。大体流程如下: 客户端打开登录界面,连接WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户...
  • 这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录。大体流程如下: 客户端打开登录界面,连接WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户扫描...
  • 小程序中用get方式明文连接websocket 参数用户昵称包含中文,并且用nginx转发wss请求 实际调试发现问题 :在开发工具调试可以正常请求接口,但实际调试失败,但是初步发现全英文的昵称可以通过,后来查看nginx...
  • 随着微信的普及,扫码登录方式越来越被现在的...这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录。大体流程如下: 客户端打开登录界面,连接WebSocket 服务 WebSc...
  • Swoole 的微信扫码登录

    2019-10-25 20:18:46
    微信应用的便捷,扫码登录方式越来越被现在的...这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录。大体流程如下: 客户端打开登录界面,连接WebSocket 服务 WebScok...
  • 数据库连接池:阿里巴巴Druid 1.1.22 缓存框架:redis 日志打印:logback 其他:fastjson,poi,Swagger-ui,quartz, lombok(简化代码)等。 前端 Vue 2.6.10,Vuex,Vue Router Axios ant-design-vue ...
  • 泊车辅助 基于ESP32的停车辅助系统,使用超声波测距和多LED显示屏这...Websocket界面,用于传递参数 远程登录接口,用于从家庭网络内部调试和/或监视设备状态 支持的ArduinoOTA通过网络下载代码 用于网络地址发现的mDNS
  • 所有参数都是可选的,如果未提供,则服务器将使用环境变量ONYX_PORT , SWARM_HTTP_URL和SWARM_WS_URL或其默认值( ws://localhost:8546上的WebSocket, http://localhost:8500上的http://localhost:8500和端口5000...
  • 建立与Slack RTM websocket API的连接,并解析为实例。 发信息 向用户或频道发送消息。 支持以下命名参数: #channel将消息发送给谁,可以是频道ID或#channel名称,也可以是用户ID 文本-​​消息,有关详细信息...
  • 5.其中,当配网不管成功与否,都会带参数跳转到 callBackUri 这个定义的页面;参数名为 blufiResult 如下: 参数 含义 true 配网成功 false 配网失败 6.比如这样处理: //生命周期函数--监听页面...
  • // 带参数路由 Router::get('/user/{id}', \App\Controllers\IndexController::class . '@user'); // 路由分组 Router::group(['namespace'=>'App\\Test\\WebSocket'],function (){ // websocket 路由 Router...
  • 接口测试:POST or GET 方式检测系统接口,参数加密,json返回结果,计算服务器响应时间 11. 发送邮件:单发,群发邮件 12. 置二维码:生成 or 解析二维码 13.地图工具:经纬度操作 14.即时通讯:打开即时聊天窗口 ...
  • 10. 接口测试:POST or GET 方式检测系统接口,参数加密,json返回结果,计算服务器响应时间 11. 发送邮件:单发,群发邮件 12. 置二维码:生成 or 解析二维码 13.地图工具:经纬度操作 14.即时通讯:打开即时聊天...
  • 接口测试:POST or GET 方式检测系统接口,参数加密,json返回结果,计算服务器响应时间 11. 发送邮件:单发,群发邮件 12. 置二维码:生成 or 解析二维码 13.地图工具:经纬度操作 14.即时通讯:打开即时聊天窗口 ...

空空如也

空空如也

1 2 3
收藏数 60
精华内容 24
关键字:

websocket连接带参数