小程序 ajax 实时通讯,小程序中添加 WebSocket 让你的通信更顺畅

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒)，由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

image

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象：

| 属性 | 描述 |

| Socket.readyState |

只读属性 readyState 表示连接状态，可以是以下值：

0 - 表示连接尚未建立。

1 - 表示连接已建立，可以进行通信。

2 - 表示连接正在进行关闭。

3 - 表示连接已经关闭或者连接不能打开。

|

| Socket.bufferedAmount |

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

|

WebSocket 事件

以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

| 事件 | 事件处理程序 | 描述 |

| open | Socket.onopen | 连接建立时触发 |

| message | Socket.onmessage | 客户端接收服务端数据时触发 |

| error | Socket.onerror | 通信发生错误时触发 |

| close | Socket.onclose | 连接关闭时触发 |

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：

| 方法 | 描述 |

| Socket.send() | 使用连接发送数据

| Socket.close() | 关闭连接

WebSocket 实例

WebSocket 协议本质上是一个基于 TCP 的协议。

为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个 HTTP 请求，这个请求和通常的 HTTP 请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

以下代码模块是在微信小程序中使用websocket的案例，可直接使用，希望能帮到大家

//app.js

App({

onLaunch: function () {

},

// 初始化webSocket

initSocket: function () {

let _this = this;

if (!_this.globalData.socketState) {

var promise = new Promise((resolve, reject) => {

// 创建socket对象

_this.globalData.socket = wx.connectSocket({

// url: 'wss://ws.zzsim.com/ws',

// url: 'ws://10.9.41.27:8090/ws',

url: 'wss://zzxcx.sgcarlife.com/ws',

success: function (res) {

console.log(_this.globalData.socket)

}

})

// 打开socket连接

_this.globalData.socket.onOpen(function (res) {

console.log('已打开连接:' + _this.globalData.socket.readyState)

wx.hideLoading();

_this.heartCheck.start()

resolve()

})

})

}

// socket断开重连

_this.globalData.socket.onClose(function (res) {

if (_this.globalData.socket.readyState === 1) {

if (res.code === 1006) {

console.log("socket非正常断开", res)

_this.globalData.socketState = true

console.log("获得了状态")

}

// _this._reConnect()

} else {

console.log('已断开连接:' + _this.globalData.socket.readyState)

_this.globalData.socketState = false

console.log("断开状态")

}

})

// socket错误事件

_this.globalData.socket.onError(function (res) {

wx.removeStorageSync('macData');

_this.globalData.socketState = false

_this.globalData.indexJS.fatherSetsockcet()

console.log('readyState=' + _this.globalData.socket.readyState)

console.log(res)

})

// 获取socket返回的消息

_this.globalData.socket.onMessage(function (res) {

})

return promise;

},

// socket发送消息

sendSocketMessage: function (msg) {

var _this = this

if (this.globalData.socket.readyState === 1) {

console.log('发送消息', msg);

this.globalData.socket.send({

data: msg,

success: function (res) {

_this.heartCheck.reset()

_this.globalData.socketState = true

console.log('发送成功：' + res)

},

fail: function (res) {

console.log('发送失败：' + res)

_this.globalData.socketState = false

wx.removeStorageSync('macData');

}

})

} else {

_this.globalData.socketState = false

console.log('已断开:' + this.globalData.socket.readyState)

// if (this.globalData.socket.readyState && this.globalData.macUrl) {

// _this.initSocket().then(() => {

// _this.sendSocketMessage(msg)

// })

// }

}

},

// 关闭socket

closeSocket: function () {

var _this = this

wx.showLoading({

title: '正在关闭',

mask: true

})

var promise = new Promise((resolve, reject) => {

var logout = {

type: "logout",

value: _this.globalData.macUrl,

token: _this.globalData.userInfo.userName,

msgType: 'MOBILE'

}

_this.sendSocketMessage(JSON.stringify(logout))

clearTimeout(_this.heartCheck.timeOutObj)

_this.globalData.socket.close({

success: function (res) {

console.log('已关闭')

//_this.globalData.indexJS.fatherSetsockcet();

_this.globalData.socketState = false;

resolve()

},

complete: function (res) {

console.log(res);

wx.hideLoading();

_this.globalData.socketState = false;

_this.globalData.macUrl = null;

resolve()

}

})

})

return promise

},

// socket心跳

heartCheck: {

timeOut: 5000,

timeOutObj: null,

// 重置心跳

reset: function () {

clearTimeout(this.timeOutObj);

this.start();

},

// 开始心跳

start: function (sendMessage) {

var app = getApp()

this.timeOutObj = setTimeout(function () {

app.sendSocketMessage("heart-check-mobile");

}, this.timeOut)

}

},

globalData: {

// 测试地址

baseUrl: '',

checkLogin: false,

socket: {},

socketState: false,

readyState: '',

},

})