如何在小程序中实现 WebSocket 通信( 四 ) _WebSocket

Page({onReady: function () {var myThis = this;wx.connectSocket({url: 'wss://weixin.techeek.cn'})wx.onSocketOpen(function (res) {wx.sendSocketMessage({data: "你好",success: function (res) {console.log("数据已发给服务器")}})myThis.setData({status: "websocket连接服务器成功"})})},onLoad: function (options) {var myThis = this;wx.onSocketMessage(function (res) {myThis.setData({message: res.data})})},})为了方便观察服务器返回的数据，我们修改下前端，增加服务器消息监听的内容。
<view><text>连接服务器状态：{{status}}</text></view><view><text>服务器消息：{{message}}</text></view>现在，重新编译，就能看到服务器返回Hello 你好的内容，我们发出的内容为你好，服务器在内容前加一个Hello然后返回给小程序。我们可以修改你好为任意内容，看看服务器能否正常返回相关内容。稍微优化下前端和后端代码，如下。
【如何在小程序中实现 WebSocket 通信】index.wxml
<button type="primary" bindtap="connect">连接webSocket服务器</button><button type="warn" bindtap="close">断开webSocket服务器</button><input placeholder="在这里输入你要发送的弹幕内容" bindblur="input"/><button bindtap="send">向webSocket服务器发送消息</button><view><text>连接服务器状态：{{status}}</text></view><view><text>服务器消息：{{message}}</text></view>index.js
Page({connect() {var myThis = this;wx.connectSocket({url: 'wss://weixin.techeek.cn'})wx.onSocketOpen(function (res) {myThis.setData({status:"websocket连接服务器成功"})})},close(){var myThis = this;wx.closeSocket()wx.onSocketClose(function (res) {myThis.setData({status: "websocket服务器已经断开"})})},send(){var myThis = this;wx.sendSocketMessage({data: this.inputValue,success: function (res) {console.log("发送信息")wx.showToast({title: '已发送',icon: 'success',duration: 1000})},fail: function (res) {myThis.setData({status: "请连接服务器"})}})},input: function (e) {this.inputValue = https://www.isolves.com/it/cxkf/ydd/xcx/2020-03-10/e.detail.value},onLoad: function (options) {var myThis = this;wx.onSocketMessage(function (res) {myThis.setData({message:res.data})wx.showToast({title: '你收到来自服务器的消息',icon: 'none',duration: 2000})})},})

文章插图

1542253679047
这样，我们就实现了向服务器发送数据，同时服务器返回数据的全部流程。
服务器主动发送数据到小程序有人可能会问，这个HTTP通信方式没有区别啊，还是小程序先请求数据到服务器，然后服务器返回数据啊，我没看到什么不同。虽然表现是这样，但是现在小程序和服务器是长连接状态，服务器可以直接推送内容到小程序，不信？我们试试。打开你的服务器Websocket.php文件，将代码修改为下面的内容。

<?phprequire_once __DIR__ . '/vendor/autoload.php';use WorkermanWorker;use WorkermanLibTimer;$worker = new Worker('websocket://0.0.0.0:8080');$worker->onWorkerStart = function($worker){Timer::add(10, function()use($worker){foreach($worker->connections as $connection) {$connection->send('你好！');}});};$worker->onMessage = function($connection, $data){echo $data . "n";$connection->send('服务器已经收到了你的消息');};Worker::runAll();

然后运行服务器。
sudo php webSocket.php start这行代码中，我们实现了小程序连接服务器后，服务器每隔10秒主动推送数据你好给小程序，无需小程序主动请求内容，同时，小程序发出的内容，可以在服务端显示。现在点击你小程序连接webSocket服务器按钮，看看效果。