专栏首页大前端开发微信小程序和服务器通信-WebSocket

微信小程序和服务器通信-WebSocket

接上一篇文章的话题,我们这次来讲一下如何建立一个基于node.js的WebSocket服务器,并在小程序中使用这个提供实时服务的服务器。

node.js中已经有很多现成的第三方库,用于构建WebSocket服务。我们今天选用一个叫做websocket的库,来构建一个可以提供标准WebSocket接口的node.js服务端程序。

先建一个空文件夹,名叫ws-server,然后进入该文件夹,在命令行执行:

npm install websocket

然后在ws-server文件夹下,再新建一个名为app.js的文件,内容如下:

const http = require('http')
const WebSocketServer = require('websocket').server

const httpServer = http.createServer((request, response) => {
    console.log('[' + new Date + '] Received request for ' + request.url)
    response.writeHead(404)
    response.end()
})

const wsServer = new WebSocketServer({
    httpServer,
    autoAcceptConnections: true
})

wsServer.on('connect', connection => {
    connection.on('message', message => {
        if (message.type === 'utf8') {
            console.log('>> message content from client: ' + message.utf8Data)
            connection.sendUTF('[from server] ' + message.utf8Data)
        }
    }).on('close', (reasonCode, description) => {
        console.log('[' + new Date() + '] Peer ' + connection.remoteAddress + ' disconnected.')
    })
})

httpServer.listen(8080, () => {
    console.log('[' + new Date() + '] Serveris listening on port 8080')
})

由于WebSocket服务是建立在HTTP之上的,因此我们从上面的代码中可以看到,代码先建立了一个http server, 然后再建立了一个使用该http server的WebSocket server,并让http server监听8080端口对外提供服务。

这个服务端的功能也很简单,就是收到客户端发送的消息并打印出来,然后在接收到的消息前面加上一个[from server]的前缀后,返回给客户端。

写完这个app.js后,通过以下命令把它运行起来:

node app.js

好,接着我们来实现一个调用该WebSocket服务的微信小程序端的代码:

Page({

  onLoad: function (options) {
    wx.connectSocket({
      url: 'ws://localhost:8080'
    })

    wx.onSocketOpen(function (res) {
      console.log('WebSocket连接已打开!')

      wx.sendSocketMessage({
        data: 'Hello,World:' + Math.round(Math.random() * 0xFFFFFF).toString(),
      })
    })

    wx.onSocketMessage(function (res) {
      console.log(res)
    })

    wx.onSocketClose(function (res) {
      console.log('WebSocket连接已关闭!')
    })
  }

})

上面的代码中,我们首先需要用wx.connectSocket()方法去连接目标服务器,因为我们的开发环境用的是非安全的http,所以这里的url参数是ws://打头的。在微信的实际运行环境中,你的服务端必须使用SSL,因此连接url就会改成wss://。

接着,需要调用wx.onSocketOpen()方法来设置WebSocket连接打开时的回调函数。当连接打开后,就可以开始向服务端发送数据了,我们在这里使用wx.sendSocketMessage()方法,向服务端发送了一个后面跟随一个随机数的Hello,World字符串。我们运行一下程序,可以看到,服务端的控制台上会打印出这样的结果:

>> message content from client: Hello,World:16119566

说明服务端已经成功接收到了客户端发送的字符串消息。

之后服务端会向客户端再反馈这个消息,那客户端这边如何接收这个从服务端过来的消息呢?我们可以在小程序中,使用wx.onSocketMessage()方法,监听服务端发送到客户端的消息,正如我们上面的示例代码写的那样:

wx.onSocketMessage(function (msg) {
      console.log(msg)
})

我们在小程序的Console上,简单的打印了从服务端过来的消息,如下所示:

小程序Console

这样,一个简单但完整的客户端和服务器端的WebSocket交互就算完成了。如果你想关闭这个WebSocket连接,可以调用wx.closeSocket()来进行关闭。

好了,关于微信小程序和WebSocket服务器通信的例子,就讲到这里吧。不对之处,欢迎指正。

谢谢大家阅读本文。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【新闻】微信小程序开发工具升级到版本 0.10.102700

    今晚引来了微信小程序开发工具《微信web开发者工具》的一次更新,此次更新新增了很多API,修复了一些bugs,也标记了一些即将废弃的API。这次更新也升级了开发...

    一斤代码
  • 【新闻】微信公众平台小程序开放公测

    小程序是一种新的开放能力,可以在微信内被便捷地获取和传播,同时具有出色的使用体验。开发者可以根据平台提供的能力,快速地开发一个小程序。

    一斤代码
  • ES6特性之:Rest参数

    其实在JavaScript中,通过使用arguments对象也能实现这种可变参数的能力,但是,arguments对象本身有点奇怪,它看起来像一个数组,但其实它不...

    一斤代码
  • 总监看完top详解后做出了这样的决定

    top命令是我们在日常工作中用的比较多的一个,学会使用top,就相当于有了一把趁手的兵器,上可九天揽月,下可五洋捉鳖。

    致码DevOps
  • 2021乐鑫科技校招芯片岗提前批真题解析(修正版)

    一个异步FIFO,rdata和wdata均为8位数据,FIFO深度为16,当rst_n输入为低时,FIFO被复位,当wclk的上升沿采样到wr为高时,数据被写入...

    数字IC小站
  • nginx负载均衡(5种方式)、rewrite重写规则及多server反代配置梳理

    Nginx除了可以用作web服务器外,他还可以用来做高性能的反向代理服务器,它能提供稳定高效的负载均衡解决方案。nginx可以用轮询、IP哈希、URL哈希等方式...

    洗尽了浮华
  • 通过mock-api模拟真实数据

    mock-api(模客)是一个便捷的 REST 接口数据模拟工具,用于前后端隔离测试,开发调试。

    Leophen
  • 用python来更改小伙伴的windows开机密码,不给10块不给开机

    小小科
  • 用python来更改小伙伴的windows开机密码,不给10块不给开机

    用户1634449
  • 北京允许无人车上路后,Pony.ai正式广州开跑

    李根 假装发自 广州南沙 量子位 报道 | 公众号 QbitAI 12月18日北京公布政策,正式允许无人车上路路测。 于是“忽如一夜春风来,千树万树梨花开”。...

    量子位

扫码关注云+社区

领取腾讯云代金券