国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Rumah applet WeChat Pembangunan program mini 微信小程序WebSocket協(xié)議說(shuō)明及使用示例分享

微信小程序WebSocket協(xié)議說(shuō)明及使用示例分享

May 10, 2018 pm 03:52 PM
applet WeChat

本文講述微信小程序WebSocket協(xié)議說(shuō)明及使用示例分享，用示例的方式，讓我們快速熟悉和用起來(lái)。

WebSocket是什么（簡(jiǎn)述）
微信的WebSocket接口和HTML5的WebSocket基本一樣，是HTTP協(xié)議升級(jí)來(lái)的，做為一個(gè)新的Socket在B/S上使用，它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信。
因?yàn)檫@里是做小程序，所以就不對(duì)WebSocket的底層和協(xié)議做過(guò)多的說(shuō)明了，只是稍微介紹一下。想了解詳細(xì)的WebSocket可以參考如下：

WebSocket 協(xié)議

WebSocket與Ajax 的選擇

在WebSocket出來(lái)之前，實(shí)現(xiàn)即時(shí)通訊通常使用Ajax來(lái)實(shí)現(xiàn)，而Ajax是通過(guò)輪詢的方式進(jìn)行實(shí)時(shí)數(shù)據(jù)的獲取，輪詢就是在指定的時(shí)間間隔內(nèi)，進(jìn)行HTTP 請(qǐng)求來(lái)獲取數(shù)據(jù)，而這種方式會(huì)產(chǎn)生一些弊端，一方面產(chǎn)生過(guò)多的HTTP請(qǐng)求，占用帶寬，增大服務(wù)器的相應(yīng)，浪費(fèi)資源，另一方面，因?yàn)椴皇敲恳淮握?qǐng)求都會(huì)有數(shù)據(jù)變化（就像聊天室），所以就會(huì)造成請(qǐng)求的利用率低。
而WebSocket正好能夠解決上面的弊端，WebSocket是客戶端與服務(wù)器之前專門建立一條通道，請(qǐng)求也只請(qǐng)求一次，而且可以從同道中實(shí)時(shí)的獲取服務(wù)器的數(shù)據(jù)，所以當(dāng)應(yīng)用到實(shí)時(shí)的應(yīng)用上時(shí)，WebSocket是一個(gè)很不錯(cuò)的選擇。

WebSocket協(xié)議名

WebSocket的鏈接不是以http或https開(kāi)頭的，而是以ws和wss開(kāi)頭的，這里需要注意一下。
實(shí)例：實(shí)時(shí)顯示交易信息

這里類似于實(shí)時(shí)查看股票信息，這里用到了圖表插件wxchart。

wxchart插件地址：

基本說(shuō)的差不多了，正式開(kāi)始。
添加stock頁(yè)面：
微信小程序WebSocket協(xié)議說(shuō)明及使用示例分享

將wxchart.js放入到pages/stock/中。
修改stock.wxml：
微信小程序WebSocket協(xié)議說(shuō)明及使用示例分享

stock.js代碼：

// pages/stock/stock.js
//加載插件
var wxCharts = require('wxcharts.js');

Page({
  data: {},

  onLoad: function (options) {

    //建立連接
    wx.connectSocket({
      url: "ws://localhost:12345",
    })

    //連接成功
    wx.onSocketOpen(function() {
      wx.sendSocketMessage({
        data: 'stock',
      })
    })

    //接收數(shù)據(jù)
    wx.onSocketMessage(function(data) {
      var objData = JSON.parse(data.data);
      console.log(data);
        new wxCharts({
          canvasId: 'lineCanvas',//指定canvas的id
          animation: false,
          type: 'line',//類型是線形圖
          categories: ['2012', '2013', '2014', '2015', '2016', '2017'],

          series: [{
            name: '交易量',
            data: objData,//websocket接收到的數(shù)據(jù)
            format: function (val) {
              if (typeof val == "string") {
                val = parseFloat(val);
              }
              return val.toFixed(2) + '萬(wàn)元';
            }
          },
          ],
          yAxis: {
            title: '交易金額 (萬(wàn)元)',
            format: function (val) {
              return val.toFixed(2);
            },
            min: 0
          },
          width: 320,
          height: 200
        });      
    })

    //連接失敗
    wx.onSocketError(function() {
      console.log('websocket連接失?。?amp;#39;);
    })
  },
})



這里WebSocket的地址是ws://localhost，端口是12345，連接成功后，向服務(wù)器發(fā)送stock，然后服務(wù)器向小程序提供數(shù)據(jù)信息。
WebSocket的服務(wù)器端我是用PHP寫(xiě)的，這里貼一下，大家可以參考一下：

<?php
include &#39;WebSocket.php&#39;;

class WebSocket2 extends WebSocket{
    public function run(){
          while(true){
          $socketArr = $this->sockets;
          $write = NULL;
          $except = NULL;
          socket_select($socketArr, $write, $except, NULL);
          foreach ($socketArr as $socket){
            if ($socket == $this->master){
              $client = socket_accept($this->master);
              if ($client < 0){
                $this->log("socket_accept() failed");
                continue;
              }else{
                $this->connect($client);
              }
            }
            else{
              $this->log("----------New Frame Start-------");
              $bytes = @socket_recv($socket,$buffer,2048,0);
              if ($bytes == 0){
                $this->disconnect($socket);
              }else{
                $user = $this->getUserBySocket($socket);
                if (!$user->handshake){
                  $this->doHandShake($user, $buffer);
                }else{
                    $buffer = $this->unwrap($user->socket, $buffer);

                    //請(qǐng)求為stock時(shí)，向通道內(nèi)推送數(shù)據(jù)
                    if ($buffer == &#39;stock&#39;) {
                        $arr = array();

                        //模擬數(shù)據(jù)
                        for ($i=0; $i < 6; $i++) { 
                            $arr[] = rand(1, 100) / 100;
                        }

                        $this->send($user->socket, json_encode($arr));
                    }
                }
              }
            }
          }
        }
    }
}

$s = new WebSocket2(&#39;localhost&#39;, 12345);
$s -> run();

用PHP寫(xiě)WebSocket稍微有些麻煩，懂Node.js的可用Node.js寫(xiě)一下，Node.js寫(xiě)后端的WebSocket很方便。

實(shí)例效果：

微信小程序WebSocket協(xié)議說(shuō)明及使用示例分享
微信WebSocketAPI參數(shù)說(shuō)明

wx.connectSocket(OBJECT)

[tr] 參數(shù) 類型 必填 說(shuō)明[/tr]

url String 是 開(kāi)發(fā)者服務(wù)器接口地址，必須是 wss 協(xié)議，且域名必須是后臺(tái)配置的合法域名
data Object 否 請(qǐng)求的數(shù)據(jù)
header Object 否 HTTP Header , header 中不能設(shè)置 Referer
method String 否 默認(rèn)是GET，有效值為： OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success Function 否 接口調(diào)用成功的回調(diào)函數(shù)
fail Function 否 接口調(diào)用失敗的回調(diào)函數(shù)
complete Function 否 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

wx.onSocketOpen(CALLBACK)

監(jiān)聽(tīng)WebSocket連接打開(kāi)事件。
wx.onSocketError(CALLBACK)

監(jiān)聽(tīng)WebSocket錯(cuò)誤。
wx.sendSocketMessage(OBJECT)

通過(guò) WebSocket 連接發(fā)送數(shù)據(jù)，需要先 wx.connectSocket，并在 wx.onSocketOpen 回調(diào)之后才能發(fā)送。
[tr] 參數(shù) 類型 必填 說(shuō)明[/tr]

data String/ArrayBuffer 是 需要發(fā)送的內(nèi)容
success Function 否 接口調(diào)用成功的回調(diào)函數(shù)
fail Function 否 接口調(diào)用失敗的回調(diào)函數(shù)
complete Function 否 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

wx.onSocketMessage(CALLBACK)

監(jiān)聽(tīng)WebSocket接受到服務(wù)器的消息事件。
[tr] 參數(shù) 類型 說(shuō)明[/tr]

data String/ArrayBuffer 服務(wù)器返回的消息

wx.closeSocket()
關(guān)閉WebSocket連接。
wx.onSocketClose(CALLBACK)
監(jiān)聽(tīng)WebSocket關(guān)閉。
關(guān)于localhost
這里說(shuō)明一下localhost，上述代碼中我用到了localhost的本地請(qǐng)求，這里只是占位使用，在程序編寫(xiě)中是不支持localhost本地請(qǐng)求的，這里大家要注意一下。

Atas ialah kandungan terperinci 微信小程序WebSocket協(xié)議說(shuō)明及使用示例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Program mini Xianyu WeChat dilancarkan secara rasmi Program mini Xianyu WeChat dilancarkan secara rasmi Feb 10, 2024 pm 10:39 PM

Program mini WeChat rasmi Xianyu telah dilancarkan secara senyap-senyap Dalam program mini, anda boleh menghantar mesej peribadi untuk berkomunikasi dengan pembeli/penjual, melihat maklumat dan pesanan peribadi, mencari item, dsb. Jika anda ingin tahu apakah program mini Xianyu WeChat. dipanggil, lihat sekarang. Apakah nama applet Xianyu WeChat Jawapan: Xianyu, transaksi terbiar, jualan terpakai, penilaian dan kitar semula. 1. Dalam program mini, anda boleh menghantar mesej terbiar, berkomunikasi dengan pembeli/penjual melalui mesej peribadi, melihat maklumat dan pesanan peribadi, mencari item yang ditentukan, dsb. 2. Pada halaman program mini, terdapat halaman utama, berdekatan, post idle, messages, and mine 5 functions; 3. Jika anda ingin menggunakannya, anda mesti mengaktifkan pembayaran WeChat sebelum anda boleh membelinya;

Laksanakan kesan penapis imej dalam program mini WeChat Laksanakan kesan penapis imej dalam program mini WeChat Nov 21, 2023 pm 06:22 PM

Melaksanakan kesan penapis gambar dalam program mini WeChat Dengan populariti aplikasi media sosial, orang ramai semakin gemar menggunakan kesan penapis pada foto untuk meningkatkan kesan artistik dan daya tarikan foto. Kesan penapis gambar juga boleh dicapai dalam program mini WeChat, menyediakan pengguna dengan fungsi penyuntingan foto yang lebih menarik dan kreatif. Artikel ini akan memperkenalkan cara melaksanakan kesan penapis imej dalam program mini WeChat dan memberikan contoh kod khusus. Pertama, kita perlu menggunakan komponen kanvas dalam applet WeChat untuk memuatkan dan mengedit imej. Komponen kanvas boleh digunakan pada halaman

Laksanakan kesan menu lungsur dalam applet WeChat Laksanakan kesan menu lungsur dalam applet WeChat Nov 21, 2023 pm 03:03 PM

Untuk melaksanakan kesan menu lungsur dalam Program Mini WeChat, contoh kod khusus diperlukan Dengan populariti Internet mudah alih, Program Mini WeChat telah menjadi bahagian penting dalam pembangunan Internet, dan semakin ramai orang telah mula memberi perhatian kepada dan. gunakan Program Mini WeChat. Pembangunan program mini WeChat adalah lebih mudah dan pantas daripada pembangunan APP tradisional, tetapi ia juga memerlukan penguasaan kemahiran pembangunan tertentu. Dalam pembangunan program mini WeChat, menu lungsur ialah komponen UI biasa, yang mencapai pengalaman pengguna yang lebih baik. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan kesan menu lungsur dalam applet WeChat dan menyediakan praktikal

Apakah nama applet WeChat Xianyu? Apakah nama applet WeChat Xianyu? Feb 27, 2024 pm 01:11 PM

Program mini WeChat rasmi Xianyu telah dilancarkan secara senyap-senyap Ia menyediakan pengguna dengan platform yang mudah yang membolehkan anda menerbitkan dan berdagang item terbiar dengan mudah. Dalam program mini, anda boleh berkomunikasi dengan pembeli atau penjual melalui mesej peribadi, melihat maklumat peribadi dan pesanan, dan mencari item yang anda inginkan. Jadi apa sebenarnya yang dipanggil Xianyu dalam program mini WeChat ini akan memperkenalkannya kepada anda secara terperinci Pengguna yang ingin tahu, sila ikuti artikel ini dan teruskan membaca! Apakah nama applet Xianyu WeChat Jawapan: Xianyu, transaksi terbiar, jualan terpakai, penilaian dan kitar semula. 1. Dalam program mini, anda boleh menghantar mesej terbiar, berkomunikasi dengan pembeli/penjual melalui mesej peribadi, melihat maklumat dan pesanan peribadi, mencari item yang ditentukan, dsb. 2. Pada halaman program mini, terdapat halaman utama, berdekatan, post melahu, mesej, dan 5 fungsi;

Applet WeChat melaksanakan fungsi muat naik imej Applet WeChat melaksanakan fungsi muat naik imej Nov 21, 2023 am 09:08 AM

Applet WeChat melaksanakan fungsi muat naik gambar Dengan perkembangan Internet mudah alih, applet WeChat telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Program mini WeChat bukan sahaja menyediakan pelbagai senario aplikasi, tetapi juga menyokong fungsi yang ditentukan oleh pembangun, termasuk fungsi muat naik imej. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi muat naik imej dalam applet WeChat dan memberikan contoh kod khusus. 1. Kerja persediaan Sebelum mula menulis kod, kita perlu memuat turun dan memasang alat pembangun WeChat dan mendaftar sebagai pembangun WeChat. Pada masa yang sama, anda juga perlu memahami WeChat

Gunakan applet WeChat untuk mencapai kesan penukaran karusel Gunakan applet WeChat untuk mencapai kesan penukaran karusel Nov 21, 2023 pm 05:59 PM

Gunakan applet WeChat untuk mencapai kesan penukaran karusel WeChat applet ialah aplikasi ringan dengan ciri pembangunan dan penggunaan yang mudah dan cekap. Dalam program mini WeChat, adalah keperluan biasa untuk mencapai kesan penukaran karusel. Artikel ini akan memperkenalkan cara menggunakan applet WeChat untuk mencapai kesan penukaran karusel dan memberikan contoh kod khusus. Mula-mula, tambahkan komponen karusel pada fail halaman applet WeChat. Contohnya, anda boleh menggunakan teg &lt;swiper&gt; untuk mencapai kesan penukaran karusel. Dalam komponen ini, anda boleh lulus b

Laksanakan kesan putaran imej dalam applet WeChat Laksanakan kesan putaran imej dalam applet WeChat Nov 21, 2023 am 08:26 AM

Untuk melaksanakan kesan putaran imej dalam Program Mini WeChat, contoh kod khusus diperlukan Program Mini WeChat ialah aplikasi ringan yang menyediakan pengguna dengan fungsi yang kaya dan pengalaman pengguna yang baik. Dalam program mini, pembangun boleh menggunakan pelbagai komponen dan API untuk mencapai pelbagai kesan. Antaranya, kesan putaran gambar merupakan kesan animasi biasa yang boleh menambah minat dan kesan visual pada program mini. Untuk mencapai kesan putaran imej dalam program mini WeChat, anda perlu menggunakan API animasi yang disediakan oleh program mini. Berikut ialah contoh kod khusus yang menunjukkan cara untuk

Laksanakan fungsi padam gelongsor dalam program mini WeChat Laksanakan fungsi padam gelongsor dalam program mini WeChat Nov 21, 2023 pm 06:22 PM

Melaksanakan fungsi padam gelongsor dalam program mini WeChat memerlukan contoh kod khusus Dengan populariti program mini WeChat, pembangun sering menghadapi masalah pelaksanaan beberapa fungsi biasa semasa proses pembangunan. Antaranya, fungsi padam gelongsor adalah keperluan fungsi yang biasa dan biasa digunakan. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan fungsi padam gelongsor dalam applet WeChat dan memberikan contoh kod khusus. 1. Analisis keperluan Dalam program mini WeChat, pelaksanaan fungsi pemadaman gelongsor melibatkan perkara berikut: Paparan senarai: Untuk memaparkan senarai yang boleh diluncurkan dan dipadam, setiap item senarai perlu disertakan

See all articles