当前位置: 首页 > news >正文

Socket.IO聊天室

项目代码  https://github.com/R-K05/Socket.IO-

创建项目

服务端项目和客户端项目

安装Socket依赖

服务端 npm i socket.io

客户端 npm i socket.io-client

客户端添加聊天页面

源码 

服务端 app.js

const express = require("express")
const app = express()const { Server } = require("socket.io");const io = new Server(3000, {cors: {// 解决客户端跨域 8080客户端运行端口origin: ["http://localhost:8080"]}
});const userList = []const onlineUsers = {}io.on("connection", (socket) => {const username = socket.handshake.query.usernameif(!username) returnconst userInfo = userList.find(user => username === user.username)if(userInfo){userInfo.id = socket.id}else{userList.push({username,id:socket.id})}io.emit("online",{userList})socket.on('send',({formUsername,targetId,msg}) =>{const toUser = userList.find(user => user.id === targetId)console.log(toUser);// 发送客户端io.to(targetId).emit('receive', { fromUsername: formUsername,toUsername:toUser.username,msg,dataTime:new Date().getTime()});})});app.listen(8000,() =>{console.log("ok");})

客户端 chattingView.vue

<template><div ><ul><template v-for="userinfo of state.userList" :key="userinfo.id"><li v-if="state.username ===userinfo.username ">{{ userinfo.username }}</li><li v-else><a href="javascript:;" @click="selectUser(userinfo)">{{ userinfo.username }}</a></li></template></ul><div v-if="state.targetUser"><h3 >{{ state.targetUser.username }}</h3><input type="text" v-model="state.msgText"><button @click="sendMsg">Send</button></div><div><ul><li v-for="(data,index) of messageList" :key="index"><p>{{ data.formUsername }}:{{ new Date(data.dataTime) }}</p><p>{{data.msg}}</p></li></ul></div></div>
</template><script setup>
import { io } from "socket.io-client";
import { useRouter } from "vue-router";
import { reactive,computed } from "vue";const rouetr = useRouter()const state = reactive({username:rouetr.currentRoute.value.query.username,userList:[],targetUser:null,msgText:'',msgBox:{}
})const messageList = computed(()=>{return (state.msgBox[state.username] && state.targetUser) ? state.msgBox[state.username].filter(item=>{return item.formUsername === state.username ||item.toUsername === state.username}) :[]
})const selectUser = (userinfo) =>{state.targetUser = userinfo}const sendMsg = () =>{if(!state.msgText.length) return;appendMsg({formUsername:state.username,toUsername:state.targetUser.name,msg:state.msgText,dataTime:new Date().getTime()})// 发送socket.emit('send',{formUsername:state.username,targetId:state.targetUser.id,msg:state.msgText})
}const socket = io('http://localhost:3000',{query:{username:state.username}
});socket.on('online',(data)=>{state.userList = data.userList})socket.on('receive',(data)=>{console.log("data===",data);appendMsg(data)})socket.on('error',(err)=>{})function  appendMsg(data) {!state.msgBox[state.username] && (state.msgBox[state.username] =[])state.msgBox[state.username].push(data)  
}
</script>

实现效果

xiaoshaofufu和xiaoningfufu之间通信

xiaoyexianseng 接收不到

 

相关文章:

Socket.IO聊天室

项目代码 https://github.com/R-K05/Socket.IO- 创建项目 服务端项目和客户端项目 安装Socket依赖 服务端 npm i socket.io 客户端 npm i socket.io-client 客户端添加聊天页面 源码 服务端 app.js const express require("express") const app express()co…...

MySQL表中数据基本操作

1.表中数据的插入&#xff1a; 1.insert insert [into] table_name [(column [,column]...)] values (value_list) [,(value_list)] ... 创建一张学生表&#xff1a; 1.1单行指定列插入&#xff1a; insert into student (name,qq) values (‘张三’,’1234455’); values左…...

可狱可囚的爬虫系列课程 16:爬虫重试机制

一、retrying模块简介 在爬虫中&#xff0c;因为我们是在线爬取内容&#xff0c;所以可能会因为网络、服务器等原因导致报错&#xff0c;那么这类错误出现以后&#xff0c;我们想要做的肯定是在报错处进行重试操作&#xff0c;Python提供了一个很好的模块&#xff0c;能够直接帮…...

第十五届蓝桥杯----B组cpp----真题解析(小白版本)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 必看前言&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;一、试题A&#xff1a;握手问题1.题意分析2.代码解答 二、试题B&#xff1a;小球反弹1.题意…...

软考架构师笔记-数据库系统

1.7 数据库系统 三级模式-两级映射 三级模式 外模式&#xff1a;用户视图概念模式&#xff1a;只涉及描述内模式&#xff1a;存储方式的描述 两级映射 外模式-概念模式映射概念模式-内模式映射 数据库的设计 步骤 需求分析 输出为需求分析、数据流图(Data FLow Diagram-DF…...

Spring AI 1.0.0-M6 快速开始(一)

Spring AI 1.0.0-M6 入门一、存储库二、依赖管理完整maven 入门 Spring 是JAVA中我们经常使用的框架之一&#xff0c;Spring AI不断的发展迭代目前已经到M6版本据说上半年会出一个稳定版本。 本节提供了如何开始使用Spring AI的M6。 一、存储库 1.0 M6 -添加Spring存储库 需…...

go 分布式redis锁的实现方式

go 语言以高并发著称。那么在实际的项目中 经常会用到锁的情况。比如说秒杀抢购等等场景。下面主要介绍 redis 布式锁实现的两种高并发抢购场景。其实 高并发 和 分布式锁 是一个互斥的两个状态&#xff1a; 方式一 setNX&#xff1a; 使用 redis自带的API setNX 来实现。能解决…...

Unity中Stack<T>用法以及删除Stack<GameObject>的方法

Unity中Stack用法以及删除Stack的方法 介绍Stack<T>的APIStack<T> 常用方法创建和初始化 Stack<T>Push 和 Pop 操作Stack<T>遍历清空栈检查栈是否包含某个元素 栈的典型应用场景撤销操作深度优先搜索&#xff08;DFS&#xff09;注意事项 总结 介绍 因…...

Vue进阶之Vue3源码解析(二)

Vue3源码解析 运行runtime-coresrc/createApp.tssrc/vnode.ts.tssrc/renderer.ts runtime-domsrc/index.ts 总结 运行 runtime-core src/createApp.ts vue的创建入口 import { createVNode } from "./vnode";export function createAppAPI(render) {return funct…...

linux的文件系统及文件类型

目录 一、Linux支持的文件系统 二、linux的文件类型 2.1、普通文件 2.2、目录文件 2.3、链接文件 2.4、字符设备文件: 2.5、块设备文件 2.6、套接字文件 2.7、管道文件 三、linux的文件属性 3.1、关于权限部分 四、Linux的文件结构 五、用户主目录 5.1、工作目录…...

如何下载安装 PyCharm?

李升伟 整理 一、下载 PyCharm 访问官网 打开 PyCharm 官网&#xff0c;点击 "Download" 按钮25。 版本选择&#xff1a; 社区版&#xff08;Community&#xff09;&#xff1a;免费使用&#xff0c;适合个人学习和基础开发。 专业版&#xff08;Professional&#…...

3D空间曲线批量散点化软件V1.0正式发布,将空间线条导出坐标点,SolidWorks/UG/Catia等三维软件通用

软件下载地址&#xff1a; SolidWorks/UG/Catia等三维软件通用&#xff0c;3D空间曲线批量散点化软件V1.0正式发布&#xff0c;将空间线条导出坐标点 - 陶小桃Blog在三维设计领域&#xff0c;工程师常需将复杂空间曲线转化为离散坐标点以用于逆向工程、有限元分析、数控加工或…...

WPS AI+office-ai的安装、使用

** 说明&#xff1a;WPS AI和OfficeAI是两个独立的AI助手&#xff0c;下面分别简单讲下如何使用 ** WPS AI WPS AI是WPS自带AI工具 打开新版WPS&#xff0c;新建文档后就可以看到菜单栏多了一个“WPS AI”菜单&#xff0c;点击该菜单&#xff0c;发现下方出现很多菜单&#xf…...

java后端开发day27--常用API(二)正则表达式爬虫

&#xff08;以下内容全部来自上述课程&#xff09; 1.正则表达式&#xff08;regex&#xff09; 可以校验字符串是否满足一定的规则&#xff0c;并用来校验数据格式的合法性。 1.作用 校验字符串是否满足规则在一段文本中查找满足要求的内容 2.内容定义 ps&#xff1a;一…...

拼电商客户管理系统

内容来自&#xff1a;尚硅谷 难度&#xff1a;easy 目 标 l 模拟实现一个基于文本界面的 《 拼电商客户管理系统 》 l 进一步掌握编程技巧和调试技巧&#xff0c;熟悉面向对象编程 l 主要涉及以下知识点&#xff1a; 类结构的使用&#xff1a;属性、方法及构造器 对象的创建与…...

华为:Wireshark的OSPF抓包分析过程

一、OSPF 的5包7状态 5个数据包 1.Hello&#xff1a;发现、建立邻居&#xff08;邻接&#xff09;关系、维持、周期保活&#xff1b;存在全网唯一的RID&#xff0c;使用IP地址表示 2.DBD&#xff1a;本地的数据库的目录&#xff08;摘要&#xff09;&#xff0c;LSDB的目录&…...

Android项目优化同步速度

最近项目需要使用ffmpeg&#xff0c;需要gradle配置引入ffmpeg库&#xff0c;发现原来通过google官方的代码仓&#xff0c;下载太慢了&#xff0c;每秒KB级别的速度。&#xff08;之前下gradle/gradle plugin都不至于这么慢&#xff09;&#xff0c;于是想到配置国内镜像源来提…...

在线教育网站项目第二步 :学习roncoo-education,服务器为ubuntu22.04.05

一、说明 前端技术体系&#xff1a;Vue3 Nuxt3 Vite5 Vue-Router Element-Plus Pinia Axios 后端技术体系&#xff1a;Spring Cloud Alibaba2021 MySQL8 Nacos Seata Mybatis Druid redis 后端系统&#xff1a;roncoo-education&#xff08;核心框架&#xff1a;S…...

STM32-GPIO详解

目录 一&#xff1a;GPIO基本概念 ​编辑 二&#xff1a;GPIO的实际应用 三&#xff1a;功能描述 四&#xff1a;GPIO库函数 五&#xff1a;寄存器 GPIO相关寄存器功能 一&#xff1a;GPIO基本概念 GPIO是英文General Purpose Input/Output的缩写&#xff0c;中文翻译为…...

【Framework系列之Client】UIManager和UIPanel模块介绍

今天来介绍一下UIManager和UIPanel模块&#xff0c;话不多说直接开始。 UIManager 功能介绍 UIManager是管理UIPanel的唯一模块&#xff0c;UIManager的主要功能包括&#xff1a; 提供打开、隐藏、关闭UIPanel的相关接口。负责UIPanel对象的创建以及初始化。负责储存UIPanel对…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...