微信小程序配置websocket环境及如何在小程序上使用做个简单的解释吧

首先简单介绍一下什么是websocket
一、WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）
首先HTTP有1.1和1.0之说，也就是所谓的keep-alive，把多个HTTP请求合并为一个，但是Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解
这里写图片描述
有交集，但是并不是全部。
另外Html5是指的一系列新的API，或者说新规范，新技术。Http协议本身只有1.0和1.1，而且跟Html本身没有直接关系。。
通俗来说，你可以用HTTP协议传输非Html数据，就是这样=。=
再简单来说，层级不一样。

二、Websocket是什么样的协议，具体有什么优点
首先，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。
简单的举个例子吧，用目前应用比较广泛的PHP生命周期来解释。
1) HTTP的生命周期通过Request来界定，也就是一个Request 一个Response，那么在HTTP1.0中，这次HTTP请求就结束了。
在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。
但是请记住 Request = Response ，在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response也是被动的，不能主动发起。
好了具体就先讲到这里，大家是不是急着看代码了？那就请往下看
用node.js配置websocket
1.首先，自然是去官网下载node.js的安装包（百度node.js即可）
2.下载完成之后，自然就是安装了，安装完成之后呢
3.先来测试看看有没有安装成功：打开cmd–然后输入 node -v 如下图
这里写图片描述
如果有版本号，那么就是安装成功了！
4.接下来依然使用的是cmd 在控制器面板输入 npm install ws 如下图

出现版本号说明安装成功
5.接下来可先测试一下是否可以使用
服务器端代码

var WebSocketServer = require('C:/Users/Administrator/node_modules/ws').Server,
wss = new WebSocketServer({ port: 8080 });
wss.on('connection', function (ws) {
    console.log("收到测试");
    ws.on('message', function (message) {
        console.log('1111')
        console.log(message);
    });
});

在小程序上依然可以使用；
接下来上客户端代码

<!DOCTYPE html>
<html>
    <body>
        <h1>WebSocket</h1>
        <script src="ceshi.js"></script>
    </body>
</html>

var ws = new WebSocket("ws://127.0.0.1:8080/");     

ws.onopen = function() {    
   alert("Opened");    
   ws.send("0000000");    
};    

ws.onmessage = function (evt) {     
    alert(evt.data);    
};    

ws.onclose = function() {    
   alert("Closed");    
};    

ws.onerror = function(err) {    
   alert("Error: " + err);    
};

你们可以把他们整合到一起，这个看你们自己的！
那么就会有人说了，怎么看效果呢，别急接下来就是同样打开你的cmd用node打开你刚才写好的服务端的位置，如下图
这里写图片描述

然后你就可以打开你的客户端的网页了，效果就出来了
这里写图片描述
这个就是效果
既然可以使用了，说明环境没问题了，接下来看在小程序如何使用了
我为了方便就用button按钮发起请求了
wxml代码

<button bindtap="websocket" >websocket链接</button>

js代码

Page({
  data:{
    path:''
  },
  onLoad:function(opt){

  },
  websocket:function(){
   var msg="你猜"
   var socketOpen=true
    wx.connectSocket({
      url: 'ws://127.0.0.1:8080/'
    })
   wx.onSocketOpen(function(res){
    wx.sendSocketMessage({
      data:msg
    })
  })
  wx.onSocketMessage(function(res) {
   console.log(res.data)
  })
  }
})

注意在微信上用的时候可以先测试一下，然后在服务端加一个返回数据的函数（那个函数就在我发的代码中，但是不在服务端，你们好好看看就会发现的），剩下就没什么可说的，这是最简单的了，如果要深入的说，那是说不完的，好了，不懂可以在下方评论！

微信小程序配置websocket环境及如何在小程序上使用做个简单的解释吧

猜你喜欢