如何让微信小程序链接websocket

微信小程序官方提供了基础的websocket API接口，可以和自己的websocket服务器进行通信。虽然有了接口，但websocket服务器需要自己搭建，这并不是一件容易的事情。

可以试试我们的GoEasy，一款第三方的websocket框架服务，很好的支持微信小程序。

使用GoEasy，你无需搭建websocket服务器，通过GoEasy提供的接口，你可以很方便、快捷的将信息发送到任何你的客户端。

具体的使用方法在下面：

登录自己的微信公众平台

进入微信公众平台|小程序 ->睁汪 设置 ->开发设置 ->服务器域名 选项的 socket合法域名项

添加 goeasy的地址： wx-hangzhou.goeasy.io

获取 GoEasy SDK

下载 https://cdn.goeasy.io/download/goeasy-1.0.11.js

import GoEasy from './goeasy-1.0.11'

初始化 GoEasy 对象

// 在onLaunch方法里初始化全友早蠢局GoEasy对象this.globalData.goEasy = new GoEasy({

host: "hangzhou.goeasy.io", //应用所在的区域地址: 【hangzhou.goeasy.io | singapore.goeasy.io】

appkey: "my_appkey", //替换为您的应用appkey

onConnected: function() {

console.log('连接成功！')

},

onDisconnected: function() {

console.log('连接断开！')

},

onConnectFailed: function(error) {

console.log('连接失败或错误！')

}})

小程序端接收消息

getApp().globalData.goEasy.subscribe({

channel: "my_channel", //替换为您自己的channel

onMessage: function (message) {

console.log("Channel:" + message.channel + " content:" + message.content)

}})

小程序端发送消息：

getApp().globalData.goEasy.publish({

channel: "my_channel", //替换为您自己的channel

message: "Hello, GoEasy!" //替换为您想要发送的消息内容})

以上便是在微信小程序中使用websocket的步骤，这里提供一份教程和demo，希望对你有所帮好陪助：网页链接

微信的 WebSocket 接口和HTML5的 WebSocket 基本一样，是HTTP协议升级来的，做为一个新的 Socket 在B/S上使用，它实现了浏览器与唯蚂伏服务器全双工通信。

因为这里是做小程序，所以就不对 WebSocket 的底层和协议做过多的说明了，只是稍微介绍一下。想了解详细的 WebSocket 可以参考如下：

具体方法如下：

创建一个 WebSocket 连接。

监听WebSocket连接打开事件。

监指携听WebSocket错误。

通过 WebSocket 连接发送数据，需要先 wx.connectSocket ，并在 wx.onSocketOpen 回调物纤之后才能发送。

监听WebSocket接受到服务器的消息事件。

关闭 WebSocket 连接。

定时心跳，按各种情况设置为10-20秒。心跳作用：通知后台保活，如果停止心跳消息，后台会主动断开，走断开流程。

使用过程中，可能因为网络问题，导致websocket断开连接，首先更具业务需求，判断是否需要重连，如果要重连不建议立刻重连，可做一个延迟 *** 作，再进行重连。

第一步：

参考此库官方说数或州明：https://github.com/mqttjs/MQTT.js#browserify

npm install -g webpack // install webpack

cd node_modules/mqtt

npm install . // install dev dependencies

webpack mqtt.js ./my_mqtt.js --output-library-target commonjs2

第二步：

将生成的薯蔽my_mqtt.js文件里所有的：

(function() { return this}())

替换为：

window

第三步：

在my_mqtt.js文件顶部加上代码：团裂

var setImmediate = setTimeout

var clearImmediate = clearTimeout

var socketOpen = false

var socketMsgQueue = []

function sendSocketMessage(msg) {

console.log('send msg:', typeof msg)

console.log(msg)

if (socketOpen) {

wx.sendSocketMessage({

data: msg

})

} else {

socketMsgQueue.push(msg)

}

}

var document = {

URL: ''

}

var window = {

setTimeout: setTimeout,

clearTimeout: clearTimeout,

WebSocket: function (url) {

console.log('call window WebSocket', arguments)

var ws = {

send: sendSocketMessage,

close: wx.closeSocket,

onopen: null,

onmessage: null,

onclose: null,

onerror: null

}

wx.connectSocket({ url: url })

wx.onSocketOpen(function (res) {

console.log('收到onopen事件:', arguments)

socketOpen = true

for (var i = 0i <socketMsgQueue.lengthi++) {

sendSocketMessage(socketMsgQueue[i])

}

socketMsgQueue = []

ws.onopen &&ws.onopen.apply(ws, arguments)

})

wx.onSocketMessage(function (res) {

console.log('收到onmessage事件:', arguments)

console.log(res.data)

ws.onmessage &&ws.onmessage.apply(ws, arguments)

})

wx.onSocketClose(function () {

console.log('收到onclose事件:', arguments)

ws.onclose &&ws.onclose.apply(ws, arguments)

})

wx.onSocketError(function () {

console.log('收到onerror事件:', arguments)

ws.onerror &&ws.onerror.apply(ws, arguments)

})

return ws

}

}

---