微信小程序web-view通信H5，websocket使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

微信小程序所提供的web-view与H5通信根据微信开放文档描述只在特定场景下才能生效。如有相关实时通信需求并不能通过此方法实现，所以想到了websocket完成实时监听通信。

一、通过node创建websocket服务

// 引入WebSocket模块 npm install nodejs-websocket
var ws = require('nodejs-websocket')
var PORT = 1760  

var server = ws.createServer(function(conn){
    conn.on("text",function(str){
        console.log(str)
        let data = JSON.parse(str)
        switch(data.type){
            case "setUser":
                console.log(data.userId)
                conn.userId = data.userId
                break;
            case "sendTo":
                sendTo(data.userId,data.msg)
                break;
        }
    })
    conn.on("close",function(code,reason){
        console.log(code)
        console.log(reason)
        console.log("connection closed")
        server.connections.forEach(conn=>{
            console.log(conn.userId)
        })
        console.log("当前连接数",server.connections.length)
    })
    conn.on("error",function(err){
        console.log("handle err")
        console.log(err)
    })
}).listen(PORT)

//创建 发送 指定 信息 方法
const sendTo = (userId,data)=>{
    server.connections.forEach(conn=>{
        if(conn.userId == userId){
            conn.sendText(data)
        }
    })
    console.log(server.connections.length)
}

console.log('websocket server listening on port ' + PORT)

使用 终端 node web.js启动websocket服务。

二、web-view连接通信

const app = getApp()

Page({
    data: {
        url: '',
        socket:null
    },
    onLoad(options) {
        let url = "http://html地址"
        this.setData({
            url: url
        })
        let _this = this
        let socket = wx.connectSocket({
            url: 'ws://192.168.0.105:1760',
            header: {
             'content-type': 'application/json'
            },
            success: function () {
             console.log("客户端连接成功！");
             wx.onSocketOpen(function(){
                 _this.setData({socket:socket})
                let msg = {
                    type:'setUser',
                    userId:'123'
                } 
                wx.sendSocketMessage({
                    data:JSON.stringify(msg)
                  })
              wx.onSocketMessage(function(msg){
                console.log(msg);
              })
             })
            }
        })

    },
    onUnload(){
        this.data.socket.close()
    }
})

三、创建html文件并编写js方法

function send(){
            let websocket = new WebSocket("ws://localhost:1760")
            websocket.onopen = function(){
                console.log("我连接上了,并开始发送消息")
                let data = {
                    type:'sendTo',
                    userId:'123',
                    msg:'给微信发消息'
                }
                websocket.send(JSON.stringify(data))
            }
        }

四、描述

这里通过本地创建websocket服务及html页面进行测试，通过触发js方法与web-view通信