微信小程序webSocket的使用方法


Posted in Javascript onFebruary 20, 2020

博客简介

本篇博客介绍微信小程序中webSocket的使用方法,以及如何用局部网络建立webSocket连接,进行客户端与服务器之间的对话:

  • webSocket简介
  • 微信小程序端API调用
  • 服务器端使用nodejs配置
  • 演示websocket

webSocket简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

微信小程序webSocket的使用方法

微信小程序端API调用

微信小程序端需要做的配置有:

  • 获取局部网络的地址
  • SocketTask wx.connectSocket创建一个 WebSocket 连接。
  • wx.onSocketOpen(function callback)监听 WebSocket 连接打开事件
  • wx.sendSocketMessage(Object object) 连接发送数据。
  • wx.onSocketMessage(function callback)监听 WebSocket 接受到服务器的消息事件

(1)获取局部网络的地址IP

获取局部网络的IP十分简单,打开设置,进入网络,点击WiFi属性,在IPv4右侧就能看见IP地址然后,在IP的前面加上ws://尾部加上3001得到可用的IP:
例如:

ws://199.213.7.102:3001

微信小程序webSocket的使用方法

(2)建立客户端和服务器的链接,并且发送消息,监听服务器回发消息

在wxml部分设置一个按钮,用来获取信息亲切发送消息:

WXML:

<input type="tex" bindchange="sendMessage" class="text" placeholder="请输入消息"></input>

JS部分建立客户端和服务器的链接,并且发送消息,监听服务器回发消息:

//本地服务器地址
var wsApi = "ws://199.213.7.102:3001";
var socketOpen==false;
 sendMessage:function(e)
 {
  var msg=e.detail.value;
   if (socketOpen) {
    console.log(msg);
    //向服务器发送消息
    wx.sendSocketMessage({
     data: msg
    })
  }
 },
 onLoad: function (options) {
  //建立连接
   wx.connectSocket({
    url: wsApi,
    header: {
     'content-type': 'application/json'
    },
    //method:"GET",
    protocols: ['protocol1'],
    success: function () {
     console.log("客户端连接成功!");
     wx.onSocketOpen(function(){
      console.log('webSocket已打开!');
      socketOpen=true;
      wx.onSocketMessage(function(msg){
        console.log(msg);
      })
     })
    }
   })
 },

服务器端使用nodejs配置

服务器这里用的是nodejs来配置,当然你也可以用其他后端语言来处理。假设你已经安装好了nodejs,那么我们开始吧:

  • 创建nodejs环境
  • 引入ws模块的构造函数并且实例化
  • 监听前端发送的消息
  • 回发消息

(1)创建nodejs环境

  • 首先新建一个文件夹websocket
  • window+R,输入cmd
  • 输入cd 空格后将websocket直接拖拽到黑框内(或者cd 路径)进入websocket文件夹
  • 接着输入npm install ws建立环境
  • 回车之后就能看到目录下生成了文件,环境就生成完毕,接下来就要写服务端的代码了

微信小程序webSocket的使用方法

微信小程序webSocket的使用方法

微信小程序webSocket的使用方法

(2)引入ws模块的构造函数并且实例化

在websocket下创建一个文件server.js,用来编写nodejs代码,首先我们要引入ws模块的构造函数并且实例化:

微信小程序webSocket的使用方法

引入ws模块的构造函数并且实例化:

//引入ws模块的构造函数
var webSocketServer=require("ws").Server;
//实例化
var wss=new webSocketServer({
	port:3001
});

(3)监听前端发送的消息

继续编写server.js,监听前端发送的消息:

  • wss.on(“connection”,function(ws)
  • ws.on(“message”,function(msg)
//引入ws模块的构造函数
var webSocketServer=require("ws").Server;
//实例化
var wss=new webSocketServer({
	port:3001
});
//监听客户端连接
wss.on("connection",function(ws){
	console.log("服务器连接建立成功");
	//监听客户端消息
	ws.on("message",function(msg){
		console.log(msg);
		ws.send("来自客户端的消息:"+msg);
	})
});

(4)回发消息

服务器接收消息之后,还要具备回发消息的能力,给客户端反馈消息,至于返回什么消息,不是我们这里要讨论的,我们直接简单的将客户发送的消息回发回去即可:

ws.send(“来自客户端的消息:”+msg)

//引入ws模块的构造函数
var webSocketServer=require("ws").Server;
//实例化
var wss=new webSocketServer({
	port:3001
});
//监听客户端连接
wss.on("connection",function(ws){
	console.log("服务器连接建立成功");
	//监听客户端消息
	ws.on("message",function(msg){
		console.log(msg);
		ws.send("来自客户端的消息:"+msg);
	})
});

演示websocket

最后我们简单地演示一下:

  • 在cmd中继续输入:node server.js,运行server.js代码
  • 在微信开发者工具中编译,运行小程序
  • 输入消息,观察反馈

微信小程序webSocket的使用方法

(1)小程序和服务器建立连接

小程序和服务器建立连接后显示:

微信小程序webSocket的使用方法

服务器端显示建立成功

微信小程序webSocket的使用方法

(2)小程序向服务器发送给消息

在文本框中输入内容,发送消息,服务器接收到后:

微信小程序webSocket的使用方法

微信小程序webSocket的使用方法

小程序获取到服务器回发的消息:

微信小程序webSocket的使用方法

到此这篇关于微信小程序webSocket的使用方法的文章就介绍到这了,更多相关小程序webSocket内容请搜素三水点靠木以前的文章或下面相关文章,希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
关于Aptana Studio生成自动备份文件的解决办法
Dec 23 Javascript
获取焦点时,利用js定时器设定时间执行动作
Apr 02 Javascript
IE8中动态创建script标签onload无效的解决方法
Dec 22 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
Jan 03 Javascript
vue实现单选和多选功能
Aug 11 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
Javascript Worker子线程代码实例
Feb 20 #Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 #Vue.js
Javascript原生ajax请求代码实例
Feb 20 #Javascript
webpack中的模式(mode)使用详解
Feb 20 #Javascript
jquery向后台提交数组的代码分析
Feb 20 #jQuery
koa-passport实现本地验证的方法示例
Feb 20 #Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 #Javascript
You might like
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
php常用Stream函数集介绍
2013/06/24 PHP
php实现文件编码批量转换
2014/03/10 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
javascript合并表格单元格实例代码
2016/01/03 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
Bootstrap基本组件学习笔记之分页(12)
2016/12/08 Javascript
Javascript同时声明一连串(多个)变量的方法
2017/01/23 Javascript
关于Sequelize连接查询时inlude中model和association的区别详解
2017/02/27 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
Python 处理图片像素点的实例
2019/01/08 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
受外贸欢迎的美国主机:BlueHost
2017/05/16 全球购物
美国知名保健品网站:LuckyVitamin(支持中文)
2017/08/09 全球购物
Linux如何修改文件和文件夹的权限
2013/09/05 面试题
生日派对邀请函
2014/01/13 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
教师自我鉴定范文
2014/03/20 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
为自己工作观后感
2015/06/11 职场文书
团组织关系介绍信
2019/06/24 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android