uni-app里使用webscoket

news2024/11/14 20:56:02

实现思路和vue中是一样的。如果想看思路可以看这篇文章:websocket

直接上可以运行的代码:

一、后端nodeJS代码:

1、新建项目文件夹

2、初始化项目:

npm init -y

3、项目里安装ws

npm i ws --save

4、nodeJS代码:

chat.js

const WsServer = require("ws").Server;

// 创建webscoket的服务器对象
const server = new WsServer({ port: 9000 });

// 绑定connection事件(当有浏览器端连接时,会触发)

let allClient = []; //保存着所有的客户端

server.on("connection", (client) => {
  console.log("有人连接了");
  // 保存连接的客户端
  allClient.push(client);
  console.log("allClient.length", allClient.length);

  // 给所有客户端发送人数:
  sendCount();

  // 给当前客户端对象绑定message事件(当前该客户端给服务器发送消息时,触发
  client.on("message", (str) => {
    console.log("有人发了消息",str);
    // 把收到的消息转发给其它客户端
    sendMsg(client,str);
  });

  client.on("close", () => {
    sendMsg(client,"有人退出了");
    allClient = allClient.filter((item) => item != client);
    sendCount();
  });
});
// 发送消息
function sendMsg(client,content) {
  allClient.forEach((item) => {
    if (item != client) {
      item.send(JSON.stringify({
        status: "msg",
        content,
      }));
    }
  });
}

// 发送人数
function sendCount() {
  allClient.forEach((item) => {
    item.send(JSON.stringify({
        status: "count",
        count: allClient.length,
      }));
  });
}

5、运行后端项目:

nodemon chat

二、前端uni-app代码

1、uni-app代码

<template>
	<view>
		<view>聊天:在线人数:{{count}}</view>
		<view class="chat-box" v-html="allmsg"></view>
		<input v-model="msg" />
		<button @click="sendMsg">发送</button>
		<button @click="exitChat">退出聊天</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allmsg: "",
				msg: "",
				count: 0
			}
		},
		onLoad() {
			const socketTask = uni.connectSocket({
				url: "ws://127.0.0.1:9000/",
				success() {

				}
			});
			console.log("socketTask", socketTask);

			uni.onSocketOpen(() => {
				console.log("服务器已经打开链接");
				// ws.send("大家好,我是新来的");
				uni.sendSocketMessage({
					data: "大家好,我是通过uni来的"
				})
			})

			uni.onSocketMessage((res) => {
				console.log('收到服务器内容:' + res.data);
				// this.allmsg += `<view>${res.data}</view>`;

				const obj = JSON.parse(res.data);
				if (obj.status == "msg") {
					console.log("typeof obj.content", typeof obj.content);
					console.log("obj.content", obj.content);
					this.allmsg += `<view>${this.blobToStr(obj.content.data)}</view>`;
					
				} else if (obj.status === "count") {
					console.log("obj.count", obj.count);
					this.count = obj.count;
				}
			})
		},
		methods: {
			exitChat(){
				uni.closeSocket();
			},
			blobToStr(data) {
				var enc = new TextDecoder("utf-8");
				var arr = new Uint8Array(data);
				return enc.decode(arr)
			},
			sendMsg() {
				uni.sendSocketMessage({
					data: this.msg
				})
			}
		}
	}
</script>

<style scoped>
	.chat-box {
		width: 100%;
		height: 800rpx;
		border: 1px solid red;
	}
</style>

2、运行项目,界面如下:

解释:当打开前端页面时,后端的socket会自动连接上

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/935978.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新仿百度文库网站源码 免费文库网站源码 文档分享平台源码 实现文档上传下载及在线预览

仿百度文库是一个以PHPMySQL进行开发的免费文库网站源码。主要特点如下&#xff1a; 界面仿照百度文库&#xff0c;使用户在使用时更加熟悉和舒适。支持文档的上传、下载和在线预览功能&#xff0c;方便用户分享和获取各种文档资料。用户可以对自己需要的文档进行悬赏&#xf…

单片机基础知识 06 (中断-2)

一. 定时器中断概念 51单片机的内部有两个16位可编程的定时器/计数器&#xff0c;即定时器T0和定时器T1。 52单片机内部多一个T2定时器/计数器。 定时器/计数器的实质是加1计数器&#xff08;16位&#xff09;&#xff0c;由高8位和低8位两个寄存器组成。 TMOD是定时器/计数器…

算法通过村第四关-栈白银笔记|手写栈操作

文章目录 前言1. 栈的基础概要1.1 栈的特征1.2 栈的操作1.3 Java中的栈 2. 栈的实现&#xff08;手写栈&#xff09;2.1 基于数组实现2.2 基于链表实现2.3 基于LinkedList实现 总结 前言 提示&#xff1a;我自己一个人的感觉很好 我并不想要拥有你 除非你比我的独处更加宜人 --…

2023年6月GESP C++ 四级试卷解析

一、单选题&#xff08;每题2分&#xff0c;共30分&#xff09; 1.高级语言编写的程序需要经过以下&#xff08; &#xff09;操作&#xff0c;可以生成在计算机上运行的可执行代码。 A.编辑 B.保存 C.调试 D.编译 【答案】D 【考纲知识点】编程环境(一级) 【解析】本题…

MVSNet 代码注释版 下载 (pytorch版)(注释非常详细,较源码结构有调整,使用起来更方便)

MVSNet 代码注释版 下载 &#xff08;注释非常详细&#xff0c;代码结构有所调整&#xff0c;使用起来更方便&#xff09; 本代码不仅进行了详细注释&#xff0c;还对源码做了相应调整&#xff0c;可以更方便用户使用&#xff0c; 结构上&#xff0c;更加清晰&#xff1b; 代…

docker,nvidia-docker安装

卸载先前的docker Docker 的旧版本被称为 docker&#xff0c;docker.io 或 docker-engine 。如果已安装&#xff0c;请卸载它们&#xff1a; sudo apt-get remove docker docker-engine docker.io containerd runc使用 Docker 仓库进行安装 设置仓库 更新 apt 包索引 sudo…

【vue2-helper插件】提供Mixins和组件库相关的类型提示、智能补全、跳转等功能~

Vue2-helper - 为你的 Vue2 开发增添智慧 ✨ &#x1f680; 辅助Vue2开发中的Mixins、组件库、Vue-router的智能补全、语义高亮、跳转支持、Hover 提示等&#xff0c;提升Vue2开发体验。 功能特色 ✨ ✅ 配置式缓存设计&#xff1a;秒级切换体验&#xff0c;让开发如丝般顺滑…

算法通关村——解析堆在数组和链表的应用

1. 堆 1.1 什么是堆&#xff1f; 堆是将一组数据以完全二叉树的形式存储在数组里面。一般有大根堆和小根堆。 小根堆&#xff1a;任意节点的值小于等于它的左右孩子&#xff0c;最小值在堆顶。 大根堆&#xff1a;任意节点的值大于等于它的左右还是&#xff0c;最大值在堆顶。…

应用TortoiseSVN的SubWCRev管理VisualStudio C#项目编译版本号

1、拷贝Porperties目录下的文件AssemblyInfo.cs生成副本AssemblyInfo.template.cs, 作为版本管理的模板文件。 2、修改模板文件中的想要管理的版本号信息 // [assembly: AssemblyVersion("1.0.*")] [assembly: AssemblyVersion("1.5.0.$WCREV$")]//0.9.5…

渗透测试工具ZAP入门教程(3)-扫描流程

使用ZAP扫描网站流程如下&#xff1a; 1&#xff09;、输入URL&#xff0c;点击启动浏览器&#xff0c;在打开的浏览器登录要扫描的网站&#xff0c;操作页面各种功能&#xff0c;尽可能遍历所有功能及页面 2&#xff09;、点击Spider Start按钮&#xff0c;爬取静态地址&…

量化:pandas基础

文章目录 简介Series构造 DataFrame构造列的查改增删填充默认值 简介 pandas是 Python 的核心数据分析支持库&#xff0c;提供了快速、灵活、明确的数据结构。 pandas主要的两种数据结构为Series和DataFrame&#xff0c;分别用于处理一维和二维数据。 Series Series 是一种类…

机器学习实战14-在日本福岛核电站排放污水的背景下,核电站对人口影响的分析实践

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下机器学习实战14-在日本福岛核电站排放污水的背景下,核电站对人口影响的分析实践。 近日&#xff0c;日本政府举行内阁成员会议&#xff0c;决定于2023年8月24日启动福岛核污染水排海。当地时间2023年8月24日13时&am…

【优化算法】Python实现面向对象的遗传算法

遗传算法 遗传算法(Genetic Algorithm)属于智能优化算法的一种&#xff0c;本质上是模拟自然界中种群的演化来寻求问题的最优解。与之相似的还有模拟退火、粒子群、蚁群等算法。 在具体介绍遗传算法之前&#xff0c;我们先来了解一些知识&#x1f9c0; DNA&#xff1a; 携带有…

【Acwing901】滑雪(记忆化搜索)题目讲解

题目描述 题目分析 样例解释 轨迹如下所示 状态表示 可以用f[i,j]表示从点&#xff08;i&#xff0c;j&#xff09;开始往下滑的最长的滑雪轨迹&#xff0c;那么最终答案就是遍历每一个点的f[i,j]&#xff0c;然后取最大值 状态计算 状态的转移也是非常的简单&#xff0c;…

ip地址查询进行企业网络数据管理

在现代企业中&#xff0c;数据管理变得越来越重要。企业需要了解和控制其网络上的各种数据流动&#xff0c;以保护敏感信息并提高网络安全性。IP地址查询是一种常用的技术&#xff0c;可以帮助企业有效地管理网络数据&#xff0c;并识别潜在的威胁。 IP地址查询是通过查找特定I…

Unix时间戳

江科大学习记录 Unix时间戳 Unix 时间戳&#xff08;Unix Timestamp&#xff09;定义为从UTC/GMT的1970年1月1日0时0分0秒开始所经过的秒数&#xff0c;不考虑闰秒时间戳存储在一个秒计数器中&#xff0c;秒计数器为32位/64位的整型变量世界上所有时区的秒计数器相同&#xf…

无涯教程-Python机器学习 - Based on human supervision函数

Python机器学习 中的 Based on human s - 无涯教程网无涯教程网提供https://www.learnfk.com/python-machine-learning/machine-learning-with-python-based-on-human-supervision.html

〔017〕Stable Diffusion 之 常用模型推荐 篇

✨ 目录 &#x1f388; 模型网站&#x1f388; 仿真系列&#x1f388; 国风系列&#x1f388; 卡通动漫系列&#x1f388; 3D系列&#x1f388; 一些好用的lora模型 &#x1f388; 模型网站 由于现在大模型超级多&#xff0c;导致每种画风的模型太多&#xff0c;那么如何选择最…

Kubernetes对象深入学习之五:TypeMeta无效之谜

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文是《Kubernetes对象深入学习之五》系列的第五篇&#xff0c;从前文的分析也能看出&#xff0c;代表对象类型的schema.ObjectKind&#xff0c;于…

uview ui 1.x ActonSheet项太多,设置滚动

问题&#xff1a;ActionSheet滚动不了。 使用uview ui &#xff1a;u-action-sheet, 但是item太多&#xff0c;超出屏幕了&#xff0c; 查了一下文档&#xff0c;并没有设置滚动的地方。 官方文档&#xff1a;ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-a…