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

websocket实现一个简单聊天框

websoket在客户端的使用

事件:open/message/error/close
方法:send/close

var socket = new WebSocket(url)// 服务连接成功时触发
socket.addEventListener('open', function() {console.log("连接成功了")
})// 主动给websocket发消息
socket.send('hello')// 接收websocket的消息
socket.addEventListener('message', function(e) {console.log("客户端收到数据了", e.data)
})// 服务断开时触发
socket.addEventListener('close', function() {console.log("服务断开连接")
})

websocket在服务端怎么用

事件:text/close/error等

const ws = require('nodejs-websocket')// 获取浏览器的数据并给浏览器发送数据
var server = ws.createServer(function(conn) {console.log('接收到了新的连接')conn.on('text', data => {// 收到的消息console.log(data)conn.send(data.toUpperCase())})// 关闭连接时触发conn.on('close', data  => {console.log('连接断开了')})// 发生异常时触发conn.on('error', data  => {console.log('连接出错了')})
})server.listen(3000, () => {console.log('服务器启动成功了, 监听端口3000')
})

使用socketio实现简单聊天室

准备: 安装一些依赖包 nodejs-websocket等
服务端:

var app = require('express')()
var server = require('http').Server(app)
var io = require('socket.io')(server)
const users = [] // 已登录的用户信息server.listen(3000, () => {console.log('服务器启动成功了')
})// express处理静态资源
// 把public目录设置成静态资源目录
app.use(require('express').static('public'))
app.get('/', function(req, res) {res.redirect('./index.html')
})io.on('connection', function(socket) {// 每个用户连接都会有一个socketsocket.on('login', data => {// 判断,如果data在user中存在,说明已经登录了,不允许登录。否则允许登录let user = users.find(item => item.username === data.username)if (user) {socket.emit('loginError', { msg: '登录失败' })} else {// 表示不存在users.push(data)// 告诉当前用户socket.emitsocket.emit('loginSuccess', data)// 广播消息,告诉所有用户io.emit,有用户加入聊天室io.emit('addUser', data)// 告诉所有用户当前群聊有多少人io.emit('userList', users)//把登录成功的用户名和头像存储起来socket.username = data.usernamesocket.avatar = data.avatar }})// 用户断开连接的功能socket.on('disconnect', () => {// 把当前用户信息删除掉let idx = users.findIndex(item => item.username === socket.username)users.splice(idx, 1)// 告诉所有人有人离开io.emit('delUser', {username: socket.username,avatar: socket.avatar})// userList发生变化io.emit('userList', users)})// 监听聊天的消息socket.on('sendMessage', data => {// 广播给所有用户io.emit('receiveMessage', data)})// 接收图片信息socket.on('sendImage', data => {// 广播给所有用户io.emit('receiveImage', data)})
})

客户端:

<script src="/socket.io/socket.io.js"></script>// 1、连接socketio服务
var socket = io('http://localhost:3000')
var username, avatar// 2、登录功能
socket.emit('login', {username: username,avatar: avatar
})socket.on('loginError', data => {alert('用户名已存在')
})socket.on('loginSuccess', data => {alert('登录成功')username = data.usernameavatar = data.avatar
})// 监听添加用户的信息
socket.on('addUser', data => {alert(data.username + '加入了群聊')
})// 监听所有用户的信息
socket.on('userList', data => {alert('当前人员有' + data)
})// 监听用户离开的信息
socket.on('delUser', data => {alert(data.username + '下线了')
})// 给服务器发消息
socket.emit('sendMessage', {msg: content,username: username,avatar: avatar
})//  监听聊天的消息
socket.on('receiveMessage', data => {// 把接收到的消息显示到窗口中if (data.username === username) {// 自己的消息显示在右边} else {// 显示在左边}
})// 发送图片给服务器
var file = ...
var fr = new FileReader()
fr.readAsDataURL(file)
fr.onload = function() {socket.emit('sendImage', {msg: content,username: username,image: fr.result})
}// 监听图片聊天记录
socket.on('receiveImage', data => {// 把接收到的图片显示到窗口中if (data.username === username) {// 自己的消息显示在右边} else {// 显示在左边}
})

相关文章:

websocket实现一个简单聊天框

websoket在客户端的使用 事件&#xff1a;open/message/error/close 方法&#xff1a;send/close var socket new WebSocket(url)// 服务连接成功时触发 socket.addEventListener(open, function() {console.log("连接成功了") })// 主动给websocket发消息 socket…...

Docker-安装应用

一、安装Tomcat 注意:新版Tomcat安装之后启动访问会出现404 修改:删除原有的webapps目录,修改webapps.dist为webapps 免修改版本:billygoo/tomcat8-jdk8 二、安装Mysql 1、安装 拉取镜像 docker pull mysql:5.7 运行镜像…...

Web3中的营销:如何在2023年获得优势

Mar. 2022, Daniel在过去的一年里&#xff0c;让人们对你的Web3项目或协议感兴趣已经变得越来越有挑战性。许多曾经充满希望的项目因为各种不同的原因&#xff0c;都在熊市中倒下了。然而&#xff0c;那些迄今为止幸存下来的项目都有一个共同点&#xff1a;强大的社区。Web3营销…...

Java中==和equals区别

文章目录Java中和equals区别1. Integer中和equals的问题1.1 Integer类型且不是通过new创建的比较1.2 手动new Integer()创建的比较1.3 Integer和int比较2. String中和equals的问题3. DemoJava中和equals区别 equals是方法&#xff0c;是运算符&#xff1a; 如果比较的对象是基…...

计算机科学导论笔记(三)

五、计算机组成 计算机组成部件可以分为三大类&#xff08;子系统&#xff09;&#xff1a;中央处理单元&#xff08;CPU&#xff09;、主存储器和输入/输出子系统。 5.1 中央处理单元&#xff08;CPU&#xff09; 中央处理单元用于数据的运算&#xff0c;分为算术逻辑单元&a…...

Stream——数字类型的字符串排序

文章目录前言什么是数字类型的字符串一个简单的坑demo拯救坑代码对象集合中的数字类型排序(有坑)对象集合中的数字类型排序 解决扩展将数字类型字符串数组转换为Integer集合总结前言 想到给数据进行排序&#xff0c;一开始头脑中想到的就是sorted()&#xff0c;本篇文章重点说…...

.NET 8 预览版 1 发布!

.NET 8 是一个长期支持(LTS) 版本。这篇文章涵盖了推动增强功能优先级排序和选择开发的主要主题和目标。.NET 8 预览版和发布候选版本将每月交付一次。像往常一样&#xff0c;最终版本将在 11 月的某个时候在 .NET Conf 上发布。 .NET 版本包括产品、库、运行时和工具&#xf…...

WebGIS学习路线

7年经验的webgis码农在此文跟大家分享一些一路走来的所见所闻。希望能帮助刚刚跨入这个门槛的你。 入门之前我相信你已经搞清楚了以下几个问题: 1.什么是webgis? 2.webgis能够解决什么样的问题? 3.为什么你要学习webgis? 如果还没考虑清楚也没关系,可能你看完这篇文章…...

【独家】华为OD机试 - 停车场最大距离(C 语言解题)

最近更新的博客 华为od 2023 | 什么是华为od,od 薪资待遇,od机试题清单华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南)华为od机试,独家整理 已参加机试人员的实战技巧文章目录 最近更新的博客使用说明本期…...

12.typedef的使用与结构体定义

欢迎访问个人网络日志&#x1f339;&#x1f339;知行空间&#x1f339;&#x1f339; 文章目录1.基础介绍2.typedef 的常用的几种情况3.使用typedef可能出现的问题参考资料1.基础介绍 typedef是C/C语言中保留的关键字&#xff0c;用来定义一种数据类型的别名。 typedef并没有…...

宝塔+docker+jenkins部署vue项目(保姆级教程)

1.使用宝塔安装docker 在软件商城安装Docker管理器 2.使用docker下载jenkins镜像 使用命令行 docker pull jenkins/jenkins:lts //lts表示支持版本较长3.创建并且挂载jenkins目录并赋值 jenkins_home为我创建的目录 可以修改任意目录 mkdir -p /jenkins_home cho…...

JVM面试总结

1.java内存模型JMM是java的内存模型,JMM-也叫Java Memory Model,这里反应翻译成存储更好,因为工作内存指的不是内存.而是CPU寄存器,主内存才是内存.屏蔽了各种硬件和操作系统的内存访问差异-把硬件的细节封装起来,实现让java程序在各平台下都能达到一致的内存访问效果,它定义了…...

C语言——文件操作

文章目录0. 思维导图1. 为什么使用文件2. 什么是文件2.1 程序文件2.2 数据文件2.3 文件名3. 文件的打开和关闭3.1 文件指针3.2 文件的打开和关闭4. 文件的顺序读写4.1 字符/字符串写入&#xff08;出&#xff09;4.2 格式化写入&#xff08;出&#xff09;4.3 二进制输入&#…...

使用aim7测试内核性能变化

aim7是一个功能强大的性能测试套件&#xff0c;可以用来测试内核的性能变化情况&#xff0c;尤其是在修改内核源码后&#xff0c;用来测试补丁对内核性能的影响情况。aim7测试结果中有一个重要的统计项&#xff1a;jobs/min&#xff0c;即每分钟完成的任务数量&#xff0c;可以…...

C++——内存管理

一&#xff0c;为什么要有内存管理因为在C/C中各个内置类型或者是自定义类型的大小都不一样&#xff0c;而如何让各个类型在内存中合理分布就非常有必要&#xff0c;由此我们就需要有内存管理。我们来看看下面这个程序中的各个变量都是如何分布的int globalVar 1; static int …...

AOP的另类用法 (权限校验自定义注解)

&#x1f473;我亲爱的各位大佬们好&#x1f618;&#x1f618;&#x1f618; ♨️本篇文章记录的为 AOP的另类用法 (权限校验&&自定义注解) 相关内容&#xff0c;适合在学Java的小白,帮助新手快速上手,也适合复习中&#xff0c;面试中的大佬&#x1f649;&#x1f649…...

[数据结构]:12-快速排序(顺序表指针实现形式)(C语言实现)

目录 前言 已完成内容 快速排序实现 01-开发环境 02-文件布局 03-代码 01-主函数 02-头文件 03-PSeqListFunction.cpp 04-SortCommon.cpp 05-SortFunction.cpp 结语 前言 此专栏包含408考研数据结构全部内容&#xff0c;除其中使用到C引用外&#xff0c;全为C语言代…...

运算符——“Python”

各位CSDN的uu们你们好呀&#xff0c;好久没有更新Python文章了&#xff0c;今天&#xff0c;小雅兰的内容就是Python中的操作符啦&#xff0c;那么现在&#xff0c;就让我们进入Python的世界吧 注释 注释是什么 注释的语法 注释的规范 输入输出 和用户交互 通过控制台输出 通…...

2022 IoTDB Summit:华为王超《Apache IoTDB 在华为云的实践》

12 月 3 日、4日&#xff0c;2022 Apache IoTDB 物联网生态大会在线上圆满落幕。大会上发布 Apache IoTDB 的分布式 1.0 版本&#xff0c;并分享 Apache IoTDB 实现的数据管理技术与物联网场景实践案例&#xff0c;深入探讨了 Apache IoTDB 与物联网企业如何共建活跃生态&#…...

C 语言网络编程 — PF_NETLINK sockets

目录 文章目录目录PF_NETLINK socketsPF_NETLINK sockets Linux 提供了 4 种 User Process 和 Kernel 之间进行通信的 IPC&#xff08;Inter-Process Communicate&#xff0c;进程间通信&#xff09;方式&#xff1a; /procioctlsysfsPF_NETLINK sockets&#xff08;Netlink …...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

Linux离线(zip方式)安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...