微信小程序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 相关文章推荐
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
JavaScript实现N皇后问题算法谜题解答
Dec 29 Javascript
JS中字符串trim()使用示例
May 26 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
详解使用create-react-app添加css modules、sasss和antd
Jul 31 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
vue.js中导出Excel表格的案例分析
Jun 11 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
Sep 19 Javascript
ES6 解构赋值的原理及运用
May 25 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
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
海量经典的jQuery插件集合
2010/01/12 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
基于JS实现回到页面顶部的五种写法(从实现到增强)
2016/09/03 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python 虚拟空间的使用代码详解
2019/06/10 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Django-rest-framework中过滤器的定制实例
2020/04/01 Python
香港通票:Hong Kong Pass
2019/02/26 全球购物
linux面试相关问题
2013/04/28 面试题
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
在校学生职业规划范文
2014/01/08 职场文书
技术总监管理职责范本
2014/03/06 职场文书
小学清明节活动方案
2014/03/08 职场文书
公司募捐倡议书
2014/05/14 职场文书
关于感恩的演讲稿500字
2014/08/26 职场文书
个人主要事迹材料
2014/08/26 职场文书
2014年工作总结与下年工作计划
2014/11/27 职场文书
运动会主持词大全
2015/07/02 职场文书
教师节获奖感言
2015/07/31 职场文书
教师年度考核自我评鉴
2015/08/11 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Python中threading库实现线程锁与释放锁
2021/05/17 Python