首页 > 其他分享 >简易聊天室

简易聊天室

时间:2023-11-19 09:14:50浏览次数:26  
标签:聊天室 ser 简易 ws 3000 querySelector message document

server.js文件内容
const ws=require("ws");//导入websocket 
let ser = new ws.Server(f port:3000));//在端口3000创建服务器
ser.on('connection',(client)=>//连接事件
client.on("message",(message)=>//客户端发送消息事件
ser.clients.forEach(c=>//遍历所有客户端
c.send(message)//发送得到的消息
])
])
)

 

Index.html文件内容
<!DOCTYPE html> 
<html lang="zh-cn">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>聊天室</title>
</head>
<bodv>
<div></div>
<input type="text" />
<script>
const ws = new WebSocket("ws://Localhost:3000");//创建WS实例
document.querySelector("input").onkeypress=(e)=>
//输入框确认事件
if (e.keyCode!=13) [
return;
:/如果按下的不是回车键(13)则忽略
letv= document.querySelector("input").value;//获取输入数据
ws.send(v);//发送数据
document.querySelector("input").value='’//清空输入
了;
ws.onmessage=(message)=>[
document
.querySelector("div")
innerHTML+="<span>"+message.data+"</span><br/>";//追加信息
];
</script>
</body>
</html>

标签:聊天室,ser,简易,ws,3000,querySelector,message,document
From: https://www.cnblogs.com/zpd0214/p/17841577.html

相关文章

  • 使用Java写一个简易web服务器
    使用Java写一个简易web服务器来替代nginx功能。main:publicstaticvoidmain(String[]args){ServerConfigLoaderserverConfigLoader=Factory.serverConfigLoader();ServerConfigserverConfig=serverConfigLoader.getServerConfig();Htt......
  • 【Windows Server】利用Windows Server中的SMTP功能搭建简易的邮件传输服务
    介绍:SMTP(简单邮件传输协议)是一种服务,使电子邮件交换在互联网和本地网络。为了实现这一点,SMTP与邮件传输代理(MTA)进行交互,并确保消息到达预期的收件人。邮件服务器]和其他消息传输代理通常使用SMTP发送和接收电子邮件消息。在本文中,我们会演示如何在Windows上安装和配置SMTP服务......
  • 学习C语言的一天(2):简易扫雷的实现
    思路:建立三个文件,头文件用于声明函数和保存程序的声明,源文件(1)用于函数的具体实现,源文件(2)用于主函数的实现建立扫雷菜单。建立2个二维数组,一个用于布置雷(下文称雷二),一个用于打印棋盘(下文称棋盘二);最终效果如下:(实际效果中保留上面的棋盘,而下面的布置雷的效果不需要打印,这里打印是......
  • verilog 简易fifo
    fifo.v`timescale1ns/1psmodulefifo#(parameterfifo_depth=128)(inputclk,inputrst,inputread_en,inputwrite_en,inputwrite_data,outputregread_data,outputfull,outputempty);localparamptr_len=......
  • 简易版
    publicList<CategoryEntity>queryWithTree(){//所有数据List<CategoryEntity>entityList=baseMapper.selectList(null);List<CategoryEntity>collect=entityList.stream().filter(item->{returnitem.getParentCid()==......
  • 简易版扫雷游戏的实现(可能)
    其实我没怎么玩过这游戏,除了在古早的xp系统上见到过内置的扫雷软件外,稍微玩过几把后就体验到了脑补雷的位置并推断地雷的位置是一件多么烧脑的事情,遂放弃了。其实我更喜欢玩蜘蛛纸牌。好了废话就讲这几句=-=嗯,首先,我们要知道扫雷游戏是怎么实现的呢?下面来看一张图:这个是微软出品的......
  • 谷歌浏览器任意网站创建即时聊天室
    打开谷歌浏览器控制台,输入并回车:vars=document.createElement('script');s.src='https://topurl.cn/chat.js';document.body.append(s); ......
  • C#学习-winform窗口程序实践-简易学生信息管理系统
    最近逐步开始学习C#,今天完成了一个简易的C#实现的winform窗口程序,如下图所示,可以实现插入,修改,删除学生信息和查询学生成绩;使用VS并连接了mysql数据库 插入 选中相应的信息可以修改 删除 ......
  • 电量计驱动的简易框架
    电量计驱动的简易框架背景最近调试了一个电量计的问题,顺便把电量计驱动的框架简单梳理了一下Kernel:5.15以cw2015电量计的驱动为例整体框架代码主要位于:drivers/power/supply/,powersupplyclass的实现,具体的电量计、充电IC等设备驱动都在此目录下整体框架大致如下:作者:She......
  • 实验:C SOCKET 多线程服务端链表分组实现聊天室
    目录......