微信小程序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 相关文章推荐
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
javascript与jquery中跳出循环的区别总结
Nov 04 Javascript
javascript常用方法汇总
Dec 02 Javascript
jquery 插件实现多行文本框[textarea]自动高度
Mar 04 Javascript
PHP+MySQL+jQuery随意拖动层并即时保存拖动位置实例讲解
Oct 09 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
Feb 19 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
JQuery属性操作与循环用法示例
May 15 jQuery
vue获取form表单的值示例
Oct 29 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
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 操作excel文件的方法小结
2009/12/31 PHP
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
WordPress的文章自动添加关键词及关键词的SEO优化
2016/03/01 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
js同源策略详解
2015/05/21 Javascript
Angular Js文件上传之form-data
2015/08/28 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
NODE.JS跨域问题的完美解决方案
2016/10/20 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
node实现mock-plugin中间件的方法
2019/12/25 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
神经网络(BP)算法Python实现及应用
2018/04/16 Python
python pygame模块编写飞机大战
2018/11/20 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
Python+selenium点击网页上指定坐标的实例
2019/07/05 Python
Python中 CSV格式清洗与转换的实例代码
2019/08/29 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Django中的模型类设计及展示示例详解
2020/05/29 Python
解决pycharm debug时界面下方不出现step等按钮及变量值的问题
2020/06/09 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
党课心得体会范文
2014/09/09 职场文书
学校计划生育责任书
2015/05/09 职场文书
爱国教育主题班会
2015/08/14 职场文书
Go 中的空白标识符下划线
2022/03/25 Golang