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

发布时间：2021-03-16 来源：网络整理

小中大

字号：

接上一篇文章的话题，我们此次来讲一下怎么完善一个基于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连接已关闭！')
    })
  }
})

2页:

2