> 위챗 애플릿 > 미니 프로그램 개발 > 연결 끊김 재연결 및 데이터 접합을 위한 기본 WebSokcet 구현 방법

연결 끊김 재연결 및 데이터 접합을 위한 기본 WebSokcet 구현 방법

小云云
풀어 주다: 2018-01-27 10:43:24
원래의
3640명이 탐색했습니다.

WebSocket 프로토콜은 HTML5의 새로운 프로토콜입니다. 브라우저와 서버 간의 전이중 통신을 구현합니다. 이 기사에서는 기본 WebSokcet을 사용하여 연결 해제 및 데이터 접합을 실현하는 WeChat 애플릿을 주로 공유합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

1. 설명

1. 미니 프로그램의 기본 WebSokcet에는 연결 해제 및 재연결 메커니즘이 없습니다.

2. 미니 프로그램의 새 버전 라이브러리는 이미 여러 WebSokcet 연결을 지원합니다.

공식 설명: Basic Library 1.7.0 이전에는 WeChat 애플릿이 동시에 하나의 WebSocket 연결만 가질 수 있었습니다. 현재 WebSocket 연결이 존재하는 경우 연결이 자동으로 닫히고 새 WebSocket 연결이 생성됩니다. 기본 라이브러리 버전 1.7.0 이상은 여러 WebSokcet 연결을 지원하며 wx.connectSocket에 대한 호출이 성공할 때마다 새 SocketTask를 반환합니다.

공식 문서 주소: https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-socket.html#wxclosesocket

두 번째, 실제 예:

먼저 소켓 주소 URL이 필요합니다: let url = 'wss://http://xxx.xxx.com/?xxx=xxx'

참고: 1. 미니 프로그램 관리 백그라운드에서 소켓 도메인 이름을 추가할 때 포트가 나타날 수 없습니다. 3. 소켓 서버에서 매핑한 포트는 공식 계정과 동일한 80과 443만 지원합니다.

다음 예:

1, 소켓.js

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

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

const app = getApp();

let url = 'wss://xxx.xxx.com/?xxx=xxx'

export const connect = function (cb) { // 定义一个方法

  wx.connectSocket({ // 创建一个 WebSocket 连接

      url: url,

      fail (err) {

if (err) {

              console.log('%cWebSocket连接失败', 'color:red', err)

              app.globalData.socketConnectFail = true // 定义一个全局变量,当链接失败时改变变量的值

}

}

})

 

  wx.onSocketOpen(function (res) { // 监听WebSocket连接打开事件。

      console.log('WebSocket打开成功');

      wx.sendSocketMessage({ // 通过 WebSocket 连接发送数据,需要先 wx.connectSocket,并在 wx.onSocketOpen 回调之后才能发送。

          data: String2Base64(), // 用于订阅的参数,视具体情况而定

          success (data) {

              console.log('WebSocket发送消息:', data.errMsg)

},

          fail (err) {

              console.log('Err', err)

}

})

 

})

 

  wx.onSocketMessage(function (res) { // 监听WebSocket接受到服务器的消息事件。

      console.log('WebSocket接收到消息:', ArryBuffer2Json(res.data));

      cb(ArryBuffer2Json(res.data)); // 将接收到的消息进行回调,如果是ArryBuffer,需要进行转换

})

 

  wx.onSocketError(function (res) { // 监听WebSocket错误。

      console.log('WebSocket连接打开失败')

})

 

  wx.onSocketClose(function (res) { // 监听WebSocket关闭。

      console.log('WebSocket关闭');

})

};

 

function ArryBuffer2Json (data) { // ArryBuffer转换成Json

try {

var encodedString = String.fromCharCode.apply(null, new Uint8Array(data));

var decodedString = decodeURIComponent(atob(encodedString));

return JSON.parse(decodedString);

} catch (err) {

      console.log(err);

return false;

}

}

 

 

function String2Base64 () { // 用于订阅的参数,视具体情况而定

var packet = {};

  packet["cmd"] = "subscribe";

  packet["reqNo"] = "" + new Date().getTime();

  packet["params"] = {token: token, channelId: 'xcx', columnIds: "1"};

return stringToUint(JSON.stringify(packet))

}

 

function stringToUint (string) {

var string = base64_encode(encodeURIComponent(string)),

      charList = string.split(''),

      uintArray = [];

for (var i = 0; i < charList.length; i++) {

      uintArray.push(charList[i].charCodeAt(0));

}

return new Uint8Array(uintArray);

}

 

function base64_encode (str) { // base64转码

var c1, c2, c3;

var base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";

var i = 0, len = str.length, string = &#39;&#39;;

 

while (i < len) {

      c1 = str.charCodeAt(i++) & 0xff;

if (i == len) {

string += base64EncodeChars.charAt(c1 >> 2);

string += base64EncodeChars.charAt((c1 & 0x3) << 4);

string += "==";

break;

}

      c2 = str.charCodeAt(i++);

if (i == len) {

string += base64EncodeChars.charAt(c1 >> 2);

string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));

string += base64EncodeChars.charAt((c2 & 0xF) << 2);

string += "=";

break;

}

      c3 = str.charCodeAt(i++);

string += base64EncodeChars.charAt(c1 >> 2);

string += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));

string += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));

string += base64EncodeChars.charAt(c3 & 0x3F)

}

return string

}

로그인 후 복사

2, index.js

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

let openSocket = require(&#39;../../config/socket.js&#39;);

const app = getApp();

data: {

  motto: &#39;Hello World&#39;,

  articleData: []

},

onLoad: function () {

let that = this;

  openSocket.connect(function (data) { // WebSocket初始化连接

let result = data.data

if (result) {

          that.setData({articleData: [result].concat(that.data.articleData)}) // 将获得的socket推送消息拼接到当前文章列表的最前面

}

});

if (app.globalData.socketConnectFail) { // WebSocket断线重连

      setInterval(() => {

          openSocket.connect(function (data) {

let result = data.data

if (result) {

                  that.setData({articleData: [result].concat(that.data.articleData)})

}

});

}, 1000)

}

}

로그인 후 복사

1

2

3、app.js

globalData: {  socketConnectFail: false}

로그인 후 복사

관련 권장 사항:

연결 끊김 및 재연결에 대한 권장 기사

Java의 Spring 부트 데이터베이스 연결 끊김에 대한 자세한 설명 줄 재연결 문제

Json 개체와 문자열을 서로 변환하는 JSON 데이터 접합 및 JSON 사용법에 대한 자세한 소개(요약)

위 내용은 연결 끊김 재연결 및 데이터 접합을 위한 기본 WebSokcet 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿