1、前(qian)言

---

在看文章(zhang)之(zhi)前(qian)，首(shou)先提2個(ge)問(wen)題：

• WebSocket 是什么原理？
• 為什么可以實現持久連接？
  如果你不甚了解，請點擊傳送門

2、概述

---

websocket是(shi)一(yi)(yi)(yi)種(zhong)全新(xin)的協議(yi)，不屬于http無狀態協議(yi)，協議(yi)名(ming)為"ws"，這(zhe)意味(wei)著(zhu)一(yi)(yi)(yi)個(ge)websocket連接(jie)地址會(hui)是(shi)這(zhe)樣的寫法：ws://**。websocket協議(yi)本質上是(shi)一(yi)(yi)(yi)個(ge)基于tcp的協議(yi)。

3、小程序具體實現

<!--index.wxml-->
<view class="container">
  <view bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="voice">
    <button type="primary" size="default" hover-class="button-hover" class="button-voice-play" bindtap="socketBtnTap">{{socktBtnTitle}}</button>
    <button type="primary" size="default" hover-class="button-hover" class="button-voice-play" bindtap="sendMessageBtnTap">發送</button>
  </view>
</view>

上面代碼中：
連接socket 按鈕綁定 socketBtnTap()
發送按鈕 綁定 sendMessageBtnTap()

<!--index.js-->
//獲(huo)取應用實例
var app = getApp()
var socketOpen = false
var socketMsgQueue = []
Page({
  data: {
    userInfo: {},
    socktBtnTitle: '連接socket'
  },
  socketBtnTap: function () {
    var that = this
    var remindTitle = socketOpen ? '正在關閉' : '正在(zai)連接'
    wx.showToast({
      title: remindTitle,
      icon: 'loading',
      duration: 10000
    })
    if (!socketOpen) {
      //創建一個 WebSocket 連接；
      //一(yi)(yi)個微信(xin)小程序同時只能有一(yi)(yi)個 WebSocket 連(lian)接(jie)(jie)，如果當前已存在一(yi)(yi)個 WebSocket 連(lian)接(jie)(jie)，會自動關閉該連(lian)接(jie)(jie)，并重新創建一(yi)(yi)個 WebSocket 連(lian)接(jie)(jie)。
      wx.connectSocket({
        url: 'ws://域名'
      })
      //監聽WebSocket錯誤
      wx.onSocketError(function (res) {
        socketOpen = false
        console.log('WebSocket連(lian)接打開失(shi)敗，請檢查！')
        that.setData({
          socktBtnTitle: '連接socket'
        })
        wx.hideToast()
      })
      //監(jian)聽WebSocket連接打(da)開(kai)事(shi)件。
      wx.onSocketOpen(function (res) {
        console.log('WebSocket連(lian)接(jie)已打開！')
        wx.hideToast()
        that.setData({
          socktBtnTitle: '斷開(kai)socket'
        })
        socketOpen = true
        for (var i = 0; i < socketMsgQueue.length; i++) {
          that.sendSocketMessage(socketMsgQueue[i])
        }
        socketMsgQueue = []
      })
      //監聽WebSocket接受到服(fu)務器(qi)的(de)消息事件
      wx.onSocketMessage(function (res) {
        console.log('收到服(fu)務器(qi)內容：' + res.data)
      })
      //監聽WebSocket關閉
      wx.onSocketClose(function (res) {
        socketOpen = false
        console.log('WebSocket 已(yi)關閉(bi)！')
        wx.hideToast()
        that.setData({
          socktBtnTitle: '連接socket'
        })
      })
    } else {
      //關閉WebSocket連接。
      wx.closeSocket()
    }
  },
  //事件處(chu)理函數
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  sendSocketMessage: function (msg) {
    if (socketOpen) {
      //通過 WebSocket 連接發送數(shu)據，需要先 wx.connectSocket，并在(zai) wx.onSocketOpen 回調之后才能發送。
      wx.sendSocketMessage({
        data: msg
      })
    } else {
      socketMsgQueue.push(msg)
    }
  },
  sendMessageBtnTap: function () {
    this.sendSocketMessage('小程(cheng)序來了')
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調(diao)用(yong)應用(yong)實(shi)例的方法獲取全局數(shu)據(ju)
    app.getUserInfo(function (userInfo) {
      //更(geng)新數據
      that.setData({
        userInfo: userInfo
      })
    })
  }
})

4、node.js服務器具體實現

node.js服務器(qi)的實(shi)現使(shi)用了(le)ws

• 安裝ws
  npm install --save ws
• 使用

<!-- koa2_webSocket/bin/www.js -->

const webSocket = require('ws');
/**
 * Create WebSocket
 */
const wss = new webSocket.Server({server});

//const wss = new webSocket('wss://echo.websocket.org/', {
//  origin: '//websocket.org'
//});

//握手(shou)完成(cheng) ws是WebSocket的一個實例
wss.on('connection', function connection(ws) {
  console.log(ws.upgradeReq.url);
  //const location = url.parse(ws.upgradeReq.url, true);
  // You might use location.query.access_token to authenticate or share sessions
  // or ws.upgradeReq.headers.cookie (see //stackoverflow.com/a/16395220/151312)

//發生錯(cuo)誤(wu)
  ws.on('error', function incoming(message) {
    console.log('error: %s', message);
  });

//斷開連接
  ws.on('close', function incoming(message) {
    console.log('close: %s', message);
  });

//收到消息
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    ws.send('something123');
  });

//發送消息
  ws.send('something');
});

5、如何還不明白，怎么辦？

項目地址：//github.com/yangxiaopingios/wx_webSocket 
項目下載：wx_webSocket-master.zip