＜uniapp＞＜websocket＞＜http＞基于uniapp，手机客户端通过websocket进行数据通讯（二维码扫码数据）

前言

本专栏是基于uniapp实现手机端各种小功能的程序，并且基于各种通讯协议如http、websocekt等，实现手机端作为客户端（或者是手持机、PDA等），与服务端进行数据通讯的实例开发。

发文平台

CSDN

环境配置

系统：windows
平台：visual studio code、HBuilderX（uniapp开发）
语言：javascript、html、vue
库：websocket、http

概述

本文是利用uniapp开发一个手机端的程序，用于实现websocket数据通讯，手机端利用uniapp实现，利用手机摄像头进行二维码扫描，获取二维码数据，通过websocket上传给服务器，服务端利用nodejs实现。

1、uniapp手机客户端实现

uniapp的开发工具是HBuilderX软件，可以在其官网下载：
https://hx.dcloud.net.cn/Tutorial/install/windows
下载完成后，按照其官网指示完成安装，然后打开HBuilderX，新建一个项目，我们可以命名为MyWebApp：

然后点击“创建”，软件将自动生成项目文件，其初始结构如下：

uniapp的开发框架是基于vue的，所以，如果你熟悉vue，那么使用uniapp开发是非常简单的。
我们可以先运行一下上面的初始代码：

HBuilderX软件内置预览功能，可以选择“PC端”或者是“移动端”来进行UI预览。
上面的预览，就是很简单的初始界面。我们需要对代码进行修改，也就是修改index.vue这个文件，我们的功能需求是实现websocket通讯，以及二维码扫描，那么我们的页面元素如下：
1、连接websocket服务器、断开
2、二维码扫描按钮、数据发送
下面是修改后的index.vue：

<template>
	<view class="content">
		<view class="head-area">
			<text class="title">{
   {
   title}}</text>
		</view>
		<view class="main-area1">
			<view class="btns-row">
				<button @click="getserver">获取</button>
				<button @click="connect">连接</button>
				<button @click="disconnect" :disabled="btn_disconn">断开</button>
			</view>
			<view>
				<ul>
					<text class="title">服务器列表：</text>
						<ul>
							<label>{
   {
   servertitle}}</label>
							<a :class="status">{
   {
   serverips}}</a>
						</ul>
				</ul>
			</view>
			
		</view>
		<view class="main-area2">
			<view class="btns-row">
				<button @click="startscan">扫描</button>
				<button class="btn-spe" @click="send">发送</button>
				<button class="btn-spe" @click="cleardata">清空</button>
			</view>
			<view class="qrcodedata">
				<text>扫描数据：</text>
				<text>{
   {
   qrcodedata}}</text>
			</view>
			<view class="senddata">
				<text>发送数据：</text>
				<text>{
   {
   senddata}}</text>
			</view>
			<view class="recvdata">
				<text>接收数据：</text>
				<text>{
   {
   recvdata}}</text>
			</view>
		</view>
		
		
		<view class="foot-area">
			<button @click="exitapp">退出程序</button>
		</view>
	</view>
</template>

<script>
	export default {
   
		data() {
   
			return {
   
				title: 'Home',
				serverIP:'',
				serverPort:'',
				serverips:'',
				servertitle:'',
				socketTask:null,
				status:'disconnect',
				qrcodedata:'',
				btn_disconn:true,
				senddata:'',
				recvdata:'',
			}
		},
		onLoad() {
   

		},
		methods: {
   
			getserver(){
   
				//判断平台，如果不支持fetch，则使用uni的request发送请求
				const platform = process.env.VUE_APP_PLATFORM;
				if ( platform == 'h5'){
   
					const res = fetch('http://192.168.1.150:3000/serverip')
					.then((response)=>{
   
						if(!response){
   
							console.log('error')
						}
						return response.json()
					})
					.then(data=>{
   
						console.log(data)
						const dt_json = JSON.parse(data.serverip