Koa2微信公眾號開發(fā)之消息管理

更新時間：2018年05月16日 16:19:50 作者：流口水流

這篇文章主要介紹了Koa2微信公眾號開發(fā)之消息管理，這一節(jié)我們就來看看公眾號的消息管理。并實現(xiàn)一個自動回復功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

一、簡介

上一節(jié)Koa2微信公眾號開發(fā)(一)，我們搭建好了本地調試環(huán)境并且接入了微信公眾測試號。這一節(jié)我們就來看看公眾號的消息管理。并實現(xiàn)一個自動回復功能。

Github源碼: github.com/ogilhinn/ko…

閱讀建議：微信公眾平臺開發(fā)文檔mp.weixin.qq.com/wiki

二、接收消息

當普通微信用戶向公眾賬號發(fā)消息時，微信服務器將POST消息的XML數(shù)據(jù)包到開發(fā)者填寫的URL上。

2.1 接收普通消息數(shù)據(jù)格式

XML的結構基本固定，不同的消息類型略有不同。

用戶發(fā)送文本消息時，微信公眾賬號接收到的XML數(shù)據(jù)格式如下所示：

<xml>
 <ToUserName><![CDATA[toUser]]></ToUserName>
 <FromUserName><![CDATA[fromUser]]></FromUserName>
 <CreateTime>createTime</CreateTime>
 <MsgType><![CDATA[text]]></MsgType>
 <Content><![CDATA[this is a test]]></Content>
 <MsgId>1234567890123456</MsgId>
</xml>

用戶發(fā)送圖片消息時，微信公眾賬號接收到的XML數(shù)據(jù)格式如下所示：

<xml> 
 <ToUserName><![CDATA[toUser]]></ToUserName>
 <FromUserName><![CDATA[fromUser]]></FromUserName>
 <CreateTime>1348831860</CreateTime> 
 <MsgType><![CDATA[image]]></MsgType> 
 <PicUrl><![CDATA[this is a url]]></PicUrl>
 <MediaId><![CDATA[media_id]]></MediaId> 
 <MsgId>1234567890123456</MsgId>
</xml>

其他消息消息類型的結構請查閱【微信公眾平臺開發(fā)文檔】

對于POST請求的處理，koa2沒有封裝獲取參數(shù)的方法，需要通過自己解析上下文context中的原生node.js請求對象request。我們將用到row-body這個模塊來拿到數(shù)據(jù)。

2.2 先來優(yōu)化之前的代碼

這一節(jié)的代碼緊接著上一屆實現(xiàn)的代碼，在上一屆的基礎上輕微改動了下。

'use strict'

const Koa = require('koa')
const app = new Koa()
const crypto = require('crypto')
// 將配置文件獨立到config.js
const config = require('./config')

app.use(async ctx => {
 // GET 驗證服務器
 if (ctx.method === 'GET') {
  const { signature, timestamp, nonce, echostr } = ctx.query
  const TOKEN = config.wechat.token
  let hash = crypto.createHash('sha1')
  const arr = [TOKEN, timestamp, nonce].sort()
  hash.update(arr.join(''))
  const shasum = hash.digest('hex')
  if (shasum === signature) {
   return ctx.body = echostr
  }
  ctx.status = 401
  ctx.body = 'Invalid signature'
 } else if (ctx.method === 'POST') { // POST接收數(shù)據(jù)
  // TODO
 }
});

app.listen(7001);

這兒我們在只在GET中驗證了簽名值是否合法，實際上我們在POST中也應該驗證簽名。

將簽名驗證寫成一個函數(shù)

function getSignature (timestamp, nonce, token) {
 let hash = crypto.createHash('sha1')
 const arr = [token, timestamp, nonce].sort()
 hash.update(arr.join(''))
 return hash.digest('hex')
}

優(yōu)化代碼，再POST中也加入驗證

...

app.use(async ctx => {
 const { signature, timestamp, nonce, echostr } = ctx.query
 const TOKEN = config.wechat.token
 if (ctx.method === 'GET') {
  if (signature === getSignature(timestamp, nonce, TOKEN)) {
   return ctx.body = echostr
  }
  ctx.status = 401
  ctx.body = 'Invalid signature'
 }else if (ctx.method === 'POST') {
  if (signature !== getSignature(timestamp, nonce, TOKEN)) {
   ctx.status = 401
   return ctx.body = 'Invalid signature'
  }
  // TODO
 }
});
...

到這兒我們都沒有開始實現(xiàn)接受XML數(shù)據(jù)包的功能，而是在修改之前的代碼。這是為了演示在實際開發(fā)中的過程，寫任何代碼都不是一步到位的，好的代碼都是改出來的。

2.3 接收公眾號普通消息的XML數(shù)據(jù)包

現(xiàn)在開始進入本節(jié)的重點，接受XML數(shù)據(jù)包并轉為JSON

$ npm install raw-body --save

...
const getRawBody = require('raw-body')
...

// TODO
// 取原始數(shù)據(jù)
const xml = await getRawBody(ctx.req, {
 length: ctx.request.length,
 limit: '1mb',
 encoding: ctx.request.charset || 'utf-8'
});
console.log(xml)
return ctx.body = 'success' // 直接回復success，微信服務器不會對此作任何處理

給你的測試號發(fā)送文本消息，你可以在命令行看見打印出如下數(shù)據(jù)

<xml>
 <ToUserName><![CDATA[gh_9d2d49e7e006]]></ToUserName>
 <FromUserName><![CDATA[oBp2T0wK8lM4vIkmMTJfFpk6Owlo]]></FromUserName>
 <CreateTime>1516940059</CreateTime>
 <MsgType><![CDATA[text]]></MsgType>
 <Content><![CDATA[JavaScript之禪]]></Content>
 <MsgId>6515207943908059832</MsgId>
</xml>

恭喜，到此你已經可以接收到XML數(shù)據(jù)了。😯 但是我們還需要將XML轉為JSON方便我們的使用，我們將用到xml2js這個包

$ npm install xml2js --save

我們需要寫一個解析XML的異步函數(shù)，返回一個Promise對象

function parseXML(xml) {
 return new Promise((resolve, reject) => {
  xml2js.parseString(xml, { trim: true, explicitArray: false, ignoreAttrs: true }, function (err, result) {
   if (err) {
    return reject(err)
   }
   resolve(result.xml)
  })
 })
}

接著調用parseXML方法，并打印出結果

...
const formatted = await parseXML(xml)
console.log(formatted)
return ctx.body = 'success'

一切正常的話*(實際開發(fā)中你可能會遇到各種問題)*，命令行將打印出如下JSON數(shù)據(jù)

{ ToUserName: 'gh_9d2d49e7e006',
 FromUserName: 'oBp2T0wK8lM4vIkmMTJfFpk6Owlo',
 CreateTime: '1516941086',
 MsgType: 'text',
 Content: 'JavaScript之禪',
 MsgId: '6515212354839473910' }

到此，我們就能處理微信接收到的消息了，你可以自己測試關注、取消關注、發(fā)送各種類型的消息看看這個類型的消息所對應的XML數(shù)據(jù)格式都是怎么樣的

三、回復消息

當用戶發(fā)送消息給公眾號時（或某些特定的用戶操作引發(fā)的事件推送時），會產生一個POST請求，開發(fā)者可以在響應包（Get）中返回特定XML結構，來對該消息進行響應（現(xiàn)支持回復文本、圖片、圖文、語音、視頻、音樂）。嚴格來說，發(fā)送被動響應消息其實并不是一種接口，而是對微信服務器發(fā)過來消息的一次回復。

3.1 被動回復用戶消息數(shù)據(jù)格式

前面說了交互的數(shù)據(jù)格式為XML，接收消息是XML的，我們回復回去也應該是XML。

微信公眾賬號回復用戶文本消息時的XML數(shù)據(jù)格式如下所示：

<xml> 
 <ToUserName><![CDATA[toUser]]></ToUserName> 
 <FromUserName><![CDATA[fromUser]]></FromUserName> 
 <CreateTime>12345678</CreateTime> 
 <MsgType><![CDATA[text]]></MsgType> 
 <Content><![CDATA[你好]]></Content> 
</xml>

微信公眾賬號回復用戶圖片消息時的XML數(shù)據(jù)格式如下所示:

<xml>
 <ToUserName><![CDATA[toUser]]></ToUserName>
 <FromUserName><![CDATA[fromUser]]></FromUserName>
 <CreateTime>12345678</CreateTime>
 <MsgType><![CDATA[image]]></MsgType>
 <Image><MediaId><![CDATA[media_id]]></MediaId></Image>
</xml>

篇幅所限就不一一列舉了，請查閱【微信公眾平臺開發(fā)文檔】

前面的代碼都是直接回復success，不做任何處理。先來擼一個自動回復吧。收到消息后就回復這兒是JavaScript之禪

// return ctx.body = 'success' // 直接success
ctx.type = 'application/xml'
return ctx.body = `<xml> 
<ToUserName><![CDATA[${formatted.FromUserName}]]></ToUserName> 
<FromUserName><![CDATA[${formatted.ToUserName}]]></FromUserName> 
<CreateTime>${new Date().getTime()}</CreateTime> 
<MsgType><![CDATA[text]]></MsgType> 
<Content><![CDATA[這兒是JavaScript之禪]]></Content> 
</xml>`

3.2 使用ejs模板引擎處理回復內容

從這一小段代碼中可以看出，被動回復消息就是把你想要回復的內容按照約定的XML格式返回即可。但是一段一段的拼XML那多麻煩。我們來加個模板引擎方便我們處理XML。模板引擎有很多，ejs 是其中一種，它使用起來十分簡單

首先下載并引入ejs

$ npm install ejs --save

如果你之前沒用過現(xiàn)在只需要記住下面這幾個語法，以及ejs.compile()方法

<% code %>：運行 JavaScript 代碼，不輸出
<%= code %>：顯示轉義后的 HTML內容
<%- code %>：顯示原始 HTML 內容

可以先看看這個ejs的小demo：

const ejs = require('ejs')
let tpl = `
<xml> 
 <ToUserName><![CDATA[<%-toUsername%>]]></ToUserName> 
 <FromUserName><![CDATA[<%-fromUsername%>]]></FromUserName> 
 <CreateTime><%=createTime%></CreateTime> 
 <MsgType><![CDATA[<%=msgType%>]]></MsgType> 
 <Content><![CDATA[<%-content%>]]></Content> 
</xml>
`
const compiled = ejs.compile(tpl)
let mess = compiled({
 toUsername: '1234',
 fromUsername: '12345',
 createTime: new Date().getTime(),
 msgType: 'text',
 content: 'JavaScript之禪',
})

console.log(mess)

/* 將打印出如下信息 
 *================
<xml>
 <ToUserName><![CDATA[1234]]></ToUserName>
 <FromUserName><![CDATA[12345]]></FromUserName>
 <CreateTime>1517037564494</CreateTime>
 <MsgType><![CDATA[text]]></MsgType>
 <Content><![CDATA[JavaScript之禪]]></Content>
</xml>
*/

現(xiàn)在來編寫被動回復消息的模板，各種if else，這兒就直接貼代碼了

<xml>
 <ToUserName><![CDATA[<%-toUsername%>]]></ToUserName>
 <FromUserName><![CDATA[<%-fromUsername%>]]></FromUserName>
 <CreateTime><%=createTime%></CreateTime>
 <MsgType><![CDATA[<%=msgType%>]]></MsgType>
 <% if (msgType === 'news') { %>
 <ArticleCount><%=content.length%></ArticleCount>
 <Articles>
 <% content.forEach(function(item){ %>
 <item>
 <Title><![CDATA[<%-item.title%>]]></Title>
 <Description><![CDATA[<%-item.description%>]]></Description>
 <PicUrl><![CDATA[<%-item.picUrl || item.picurl || item.pic || item.thumb_url %>]]></PicUrl>
 <Url><![CDATA[<%-item.url%>]]></Url>
 </item>
 <% }); %>
 </Articles>
 <% } else if (msgType === 'music') { %>
 <Music>
 <Title><![CDATA[<%-content.title%>]]></Title>
 <Description><![CDATA[<%-content.description%>]]></Description>
 <MusicUrl><![CDATA[<%-content.musicUrl || content.url %>]]></MusicUrl>
 <HQMusicUrl><![CDATA[<%-content.hqMusicUrl || content.hqUrl %>]]></HQMusicUrl>
 </Music>
 <% } else if (msgType === 'voice') { %>
 <Voice>
 <MediaId><![CDATA[<%-content.mediaId%>]]></MediaId>
 </Voice>
 <% } else if (msgType === 'image') { %>
 <Image>
 <MediaId><![CDATA[<%-content.mediaId%>]]></MediaId>
 </Image>
 <% } else if (msgType === 'video') { %>
 <Video>
 <MediaId><![CDATA[<%-content.mediaId%>]]></MediaId>
 <Title><![CDATA[<%-content.title%>]]></Title>
 <Description><![CDATA[<%-content.description%>]]></Description>
 </Video>
 <% } else { %>
 <Content><![CDATA[<%-content%>]]></Content>
 <% } %>
</xml>

現(xiàn)在就可以使用我們寫好的模板回復XML消息了

...
const formatted = await parseXML(xml)
console.log(formatted)
let info = {}
let type = 'text'
info.msgType = type
info.createTime = new Date().getTime()
info.toUsername = formatted.FromUserName
info.fromUsername = formatted.ToUserName
info.content = 'JavaScript之禪'
return ctx.body = compiled(info)

我們可以把這個回復消息的功能寫成一個函數(shù)

function reply (content, fromUsername, toUsername) {
 var info = {}
 var type = 'text'
 info.content = content || ''
 // 判斷消息類型
 if (Array.isArray(content)) {
  type = 'news'
 } else if (typeof content === 'object') {
  if (content.hasOwnProperty('type')) {
   type = content.type
   info.content = content.content
  } else {
   type = 'music'
  }
 }
 info.msgType = type
 info.createTime = new Date().getTime()
 info.toUsername = toUsername
 info.fromUsername = fromUsername
 return compiled(info)
}

在回復消息的時候直接調用這個方法即可

...
const formatted = await parseXML(xml)
console.log(formatted)
const content = 'JavaScript之禪'
const replyMessageXml = reply(content, formatted.ToUserName, formatted.FromUserName)
return ctx.body = replyMessageXml

現(xiàn)在為了測試我們所寫的這個功能，來實現(xiàn)一個【學我說話】的功能:

回復音樂將返回一個音樂類型的消息，回復文本圖片，語音，公眾號將返回同樣的內容，當然了你可以在這個基礎上進行各種發(fā)揮。

....
const formatted = await parseXML(xml)
console.log(formatted)
let content = ''
if (formatted.Content === '音樂') {
 content = {
  type: 'music',
  content: {
   title: 'Lemon Tree',
   description: 'Lemon Tree',
   musicUrl: 'http://mp3.com/xx.mp3'
  },
 }
} else if (formatted.MsgType === 'text') {
 content = formatted.Content
} else if (formatted.MsgType === 'image') {
 content = {
  type: 'image',
  content: {
   mediaId: formatted.MediaId
  },
 }
} else if (formatted.MsgType === 'voice') {
 content = {
  type: 'voice',
  content: {
   mediaId: formatted.MediaId
  },
 }
} else {
 content = 'JavaScript之禪'
}
const replyMessageXml = reply(content, formatted.ToUserName, formatted.FromUserName)
console.log(replyMessageXml)
ctx.type = 'application/xml'
return ctx.body = replyMessageXml

nice，到此時我們的測試號已經能夠根據(jù)我們的消息做出相應的回應了

本篇再上一節(jié)的代碼基礎上做了一些優(yōu)化，并重點講解微信公眾號的消息交互，最后實現(xiàn)了個【學我說話】的小功能。下一篇，我們將繼續(xù)補充消息管理相關的知識。最后再說一句：看文檔 😉

參考鏈接

微信公眾平臺開發(fā)文檔：mp.weixin.qq.com/wiki
raw-body：https://github.com/stream-utils/raw-body
xml2js: github.com/Leonidas-fr…
ejs:github.com/mde/ejs
源碼： github.com/ogilhinn/ko…

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

node.js之基礎加密算法模塊crypto詳解
這篇文章主要介紹了node.js之基礎加密算法模塊crypto詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
Node.js中創(chuàng)建和管理外部進程詳解
這篇文章主要介紹了Node.js中創(chuàng)建和管理外部進程詳解,本文講解了執(zhí)行外部命令的方法、子進程相關內容等,需要的朋友可以參考下
2014-08-08
nodeJs實現(xiàn)基于連接池連接mysql的方法示例
這篇文章主要介紹了nodeJs實現(xiàn)基于連接池連接mysql的方法,結合具體實例形式分析了nodejs連接池操作mysql數(shù)據(jù)庫連接的實現(xiàn)與使用技巧,需要的朋友可以參考下
2018-02-02
NodeJS實現(xiàn)同步的方法
今天小編就為大家分享一篇關于NodeJS實現(xiàn)同步的方法，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-03-03
Node.js的MongoDB驅動Mongoose基本使用教程
這篇文章主要介紹了Node.js的MongoDB驅動Mongoose的基本使用教程,前端js+后端Node.js+數(shù)據(jù)庫MongoDB是當下流行的JavaScript全棧開發(fā)方案,需要的朋友可以參考下
2016-03-03
Nodejs為什么選擇javascript為載體語言
準備寫一個NodeJS方面的系列文章，由淺入深，循序漸進，秉承的理念是重思想，多實踐，勤能補拙，貴在堅持。本文首先來點基礎知識的開篇吧。
2015-01-01
koa2實現(xiàn)登錄注冊功能的示例代碼
這篇文章主要介紹了koa2實現(xiàn)登錄注冊功能的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
node.js 動態(tài)執(zhí)行腳本
其中的Script對象，就與require('vm')返回的對象很相似，而實質上，vm模塊就是對Script對象的封裝。
2016-06-06
node.js中的fs.rename方法使用說明
這篇文章主要介紹了node.js中的fs.rename方法使用說明,本文介紹了fs.rename的方法說明、語法、接收參數(shù)、使用實例和實現(xiàn)源碼,需要的朋友可以參考下的相關資料
2014-12-12
詳解nodeJS之二進制buffer對象
本篇文章主要介紹了nodeJS之二進制buffer對象，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-06-06

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Koa2微信公眾號開發(fā)之消息管理

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具