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

Page({onReady: function () { wx.connectSocket({url: 'wss://weixin.techeek.cn' })},})有小程序开发经验的小伙伴都知道，这里的onReady是小程序的生命周期函数，负责在小程序初次渲染完成后执行的函数，这样我们编译完小程序，小程序就自动连接服务器。现在编译一下试试，咦，好像不行啊，怎么没看到小程序有反应。我们打开控制台，点击Network按钮，如果看到类似下面的内容，就证明你的小程序已经成功链接服务器了。

文章插图

1542249696427
这里的HTTP状态码是101 ， 101状态码是websocket特有的状态码，我们已经成功连接搭建的服务器。但是我们能不能直观点看到已经连接服务器呢？当然可以，参考文档使用success属性，我们在其中加入回调函数。修改代码如下。

Page({onReady: function () {wx.connectSocket({url: 'wss://weixin.techeek.cn',success: function (res) {console.log("连接服务器成功")},fail: function (res) {console.log("连接服务器失败")}})},})

我们增加一个回调函数，如果服务器连接成功，向小程序控制台打印出连接服务器成功。反正打印连接服务器失败。

文章插图

1542250247835
当然，我们也可以将成功的内容展示给小程序前端，代码如下，首先修改index.wxml代码。
<view><text>连接服务器状态：{{status}}</text></view>然后打开index.js文件，修改代码

Page({onReady: function () {var myThis = this;wx.connectSocket({url: 'wss://weixin.techeek.cn',success: function (res) {myThis.setData({status: "连接服务器成功"})},fail: function (res) {myThis.setData({status: "连接服务器失败"})}})},})

现在重新编译小程序，你会看到类似这样的界面。

文章插图

1542250497626
向服务器发送数据服务器搭建我们说到，我们的服务器的代码内容是将小程序发给服务器的任意字符前加hello之后返回给小程序，现在，我们已经成功连接服务器了。接下来，我们需要修改代码，以便小程序将数据发给服务器。
官方文档中，使用wx.sendSocketMessage()API将数据发给服务器，根据官方文档，通过 WebSocket 连接发送数据。需要先wx.connectSocket连接服务器，并在 wx.onSocketOpen 回调之后才能发送。所以在调用wx.sendSocketMessage()前，需要先调用wx.onSocketOpen监听WebSocket连接是否打开。代码如下。

Page({onReady: function () {var myThis = this;wx.connectSocket({url: 'wss://weixin.techeek.cn'})wx.onSocketOpen(function (res) {myThis.setData({status: "websocket连接服务器成功"})})},})

现在，我们就可以使用wx.sendSocketMessage()发送数据到服务器了，先看看官方文档，怎么使用。

文章插图

我们只需要传data内容给API ，就能发内容给服务器了，那么修代码内容如下。

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连接服务器成功"})})},})

现在，我们的数据已经可以发给服务器了，可是我们还没有看到服务器返回的数据，这时，我们就该使用另一个API了，监听WebSocket 接受到服务器的消息事件wx.onSocketMessage() ，该API返回服务器发出的消息。但是onReady函数是页面加载就运行的，这时服务器还没反应过来，数据返回了没收到该怎么处理？我们可以引入另一个生命周期函数onLoad ，这个函数是小程序负责监听页面加载的函数，我们可以将服务器消息事件监听的API写在这里，当接收到数据，由这个函数返回相关内容。所以代码如下。