热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

微信小程序webSocket的使用方法

这篇文章主要介绍了微信小程序webSocket的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

博客简介

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

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

webSocket简介

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

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

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

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

WXML:

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建立环境
  • 回车之后就能看到目录下生成了文件,环境就生成完毕,接下来就要写服务端的代码了



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

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


引入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代码
  • 在微信开发者工具中编译,运行小程序
  • 输入消息,观察反馈

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

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


服务器端显示建立成功

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

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



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

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


推荐阅读
  • 本文介绍了如何使用外向烧鹅IO库来封装GET请求的具体步骤,包括库的安装与配置、请求拦截器的设置以及如何在Vue项目中调用这些封装好的请求方法。 ... [详细]
  • 微信小程序实现拍照与图片上传功能
    本文介绍如何在微信小程序中实现用户通过拍照或从相册选择图片,并将图片上传至服务器的功能,包括调用相关API和处理上传响应。 ... [详细]
  • 微信小程序中实现位置获取的全面指南
    本文详细介绍了如何在微信小程序中实现地理位置的获取,包括通过微信官方API和腾讯地图API两种方式。文中不仅涵盖了必要的准备工作,如申请开发者密钥、下载并配置SDK等,还提供了处理用户授权及位置信息获取的具体代码示例。 ... [详细]
  • 本文将深入探讨PHP编程语言的基本概念,并解释PHP概念股的含义。通过详细解析,帮助读者理解PHP在Web开发和股票市场中的重要性。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • 本文档汇总了Python编程的基础与高级面试题目,涵盖语言特性、数据结构、算法以及Web开发等多个方面,旨在帮助开发者全面掌握Python核心知识。 ... [详细]
  • 本文探讨了在C语言编程中,如何有效避免多文件项目中的重定义问题,通过合理使用预处理器指令和extern关键字,确保代码的健壮性和可维护性。 ... [详细]
  • 微信小程序koa获取微信accesstoken ... [详细]
  • 微信小程序详解:概念、功能与优势
    微信公众平台近期向200位开发者发送了小程序的内测邀请。许多人对微信小程序的概念还不是很清楚。本文将详细介绍微信小程序的定义、功能及其独特优势。 ... [详细]
  • 本文详细介绍了Java的安装、配置、运行流程以及有效的学习方法,旨在帮助初学者快速上手Java编程。 ... [详细]
  • 深入理解小程序中的Picker组件
    Picker组件是一种从屏幕底部弹出的滚动选择器,支持多种选择模式,包括普通选择器、多列选择器、时间选择器、日期选择器和省市区选择器。本文将详细介绍Picker的各种属性及其应用场景。 ... [详细]
  • 区块链的兴起:恰逢其时,犹如1996年的互联网
    本文探讨了区块链技术的发展阶段,将其与1996年互联网的兴起进行对比,分析了当前区块链技术的现状及其未来潜力。 ... [详细]
  • 掌握Spring MVC中自定义类型转换与格式化的技巧
    近期,在开发一款小程序的过程中遇到了几个Spring MVC接口需要传递时间参数的问题。本文将详细介绍如何利用Java 8 Time API在Spring MVC中实现时间参数的自定义类型转换和格式化。 ... [详细]
  • 探讨在微信小程序环境中是否能够获取到全局this对象,并分析其背后的技术实现。 ... [详细]
  • 智慧城市建设现状及未来趋势
    随着新基建政策的推进及‘十四五’规划的实施,我国正步入以5G、人工智能等先进技术引领的智慧经济新时代。规划强调加速数字化转型,促进数字政府建设,新基建政策亦倡导城市基础设施的全面数字化。本文探讨了智慧城市的发展背景、全球及国内进展、市场规模、架构设计,以及百度、阿里、腾讯、华为等领军企业在该领域的布局策略。 ... [详细]
author-avatar
丨为你
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有