微信小程序和服务器通信-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 条评论
登录 后参与评论

相关文章

来自专栏吴柯的运维笔记

Samba共享常见的集中配置

配置SMB共享 SMB协议是建立在NetBIOS协议之上的应用协议,是基于TCP138、139两个端口的服务,NetBIOS出现之后,Microsoft就使用...

38590
来自专栏吴柯的运维笔记

容易忘的Linux基础小工具(附vim编辑技巧)

linux目录层次: -man hier (有问题找男人) ? ? 权限的数值表示: -基本权限:r=4 w=2 x=1 -附加权限:SUID=4 ...

30860
来自专栏CRPER折腾记

VS Code 折腾记 - (7) 内置Debug功能深入【调教angular-cli 最新版】

很多小伙伴说用了打包工具(Webpack)之后,断点调试相当痛苦; 常规的方式无非是debugger,console.log()大法; 但是,vscode这货天...

11620
来自专栏黑泽君的专栏

day60_BOS项目_12

13520
来自专栏Flutter入门到实战

老司机带你快速上手调试Flutter项目

在讲解调试工具之前,先来看看有关的设置选项,点击菜单栏File-->Settings-->Languages & Frameworks --> Flutter,...

64330
来自专栏吴柯的运维笔记

如何用Rysnc实现数据同步?

Rsync(remote sync) 是UNIX及类UNIX平台一款数据镜像备份软件,它不像FTP等其他文件传输服务那样需要进行全备份,Rsync可以根据数据...

419130
来自专栏互扯程序

跨域请求方案 终极版

现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。

42430
来自专栏向治洪

React Native自动化测试

大凡做软件开发,肯定会涉及到很多的测试,本地测试,Junit测试,用例测试等,今天就来说说RN的测试。 React Native的官方代码仓库里有一些测试代码,...

52550
来自专栏.NET技术

elasticsearch同步mongodb--mongo connector的使用

mongodb-win32-x86_64-3.4.6-signed.msi  (如果已经安装可以忽略)

29920
来自专栏Jerry的SAP技术分享

webpack-dev-server启动后, localhost:8080返回index.html的原理

webpack-dev-server是一个采用Node.js Express实现的微型服务器, 内部使用webpack-dev-middleware来响应发送到...

20320

扫码关注云+社区

领取腾讯云代金券