微信小程序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 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
node.js实现端口转发
Apr 14 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
实现隔行换色效果的两种方式【实用】
Nov 27 Javascript
Vue 过渡(动画)transition组件案例详解
Jan 22 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
vuex刷新后数据丢失的解决方法
Oct 18 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+oracle 分页类
2006/10/09 PHP
php正则校验用户名介绍
2008/07/19 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
浅谈Node.js轻量级Web框架Express4.x使用指南
2017/05/03 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
HTML+JavaScript实现扫雷小游戏
2019/09/30 Javascript
vue excel上传预览和table内容下载到excel文件中
2019/12/10 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
如何运行Python程序的方法
2013/04/21 Python
Python中replace方法实例分析
2014/08/20 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python运算符重载详解及实例代码
2017/03/07 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
YOOX台湾:意大利奢侈品电商
2018/10/13 全球购物
编辑找工作求职信范文
2013/12/16 职场文书
物流司机岗位职责
2013/12/28 职场文书
绩效考核实施方案
2014/03/18 职场文书
党员承诺书内容
2014/03/26 职场文书
2016年五一促销广告语
2016/01/28 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
Mysql 数据库中的 redo log 和 binlog 写入策略
2022/04/26 MySQL
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript