socket.io.js聊天室

最新推荐文章于 2023-07-11 13:05:30 发布
最新推荐文章于 2023-07-11 13:05:30 发布
阅读量402 收藏
点赞数
文章标签： socket
原文链接：https://www.cnblogs.com/limitcode/p/7845168.html
版权

socket.io.js聊天室

安装node.js

1.搭建框架

var http=require("http");
var express=require("express");//引入express
var socketIo=require("socket.io");//引入socket.io
var app=new express();
var server=http.createServer(app);
var io=new socketIo(server);//将socket.io注入express模块
//客户端 1 的访问地址
app.get("/client1",function (req,res,next) {
    res.sendFile(__dirname+"/views/client1.html");
});
//客户端 2 的访问地址
app.get("/client2",function (req,res,next) {
    res.sendFile(__dirname+"/views/client2.html");
});
server.listen(9009);//express 监听 8080 端口，因为本机80端口已被暂用
//每个客户端socket连接时都会触发 connection 事件
io.on("connection",function (clientSocket) {
    // socket.io 使用 emit(eventname,data) 发送消息，使用on(eventname,callback)监听消息
    //监听客户端发送的 sendMsg 事件
    clientSocket.on("sendMsg",function (data) {
        // data 为客户端发送的消息，可以是 字符串，json对象或buffer
        // 使用 emit 发送消息，broadcast 表示 除自己以外的所有已连接的socket客户端。
        clientSocket.broadcast.emit("receiveMsg",data);
    })
});

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户端1</title>
</head>
<body>
<label>聊天内容:</label><br/>
<textarea id="content" style="height: 200px; width:300px;"></textarea>
<br/>
<input  id="sendMsg" type="text"/>
<button id="btn_send">发送</button>

<!-- 首先引入 socket.io 客户端脚本-->
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
 var socket = io.connect();//连接服务端，因为本机使用localhost 所以connect(url)中url可以不填或写 http://localhost
    // 监听 receiveMsg 事件，用来接收其他客户端推送的消息
 socket.on("receiveMsg",function (data) {
        content.value+=data.client+":"+data.msg+"\r\n";
 });
 var content=document.getElementById("content");
 var sendMsg=document.getElementById("sendMsg");
 var btn_send=document.getElementById("btn_send");
 btn_send.addEventListener("click",function () {
        var data={client:"客户端1",msg:sendMsg.value};
 //给服务端发送 sendMsg事件名的消息
 socket.emit("sendMsg",data);
 content.value+=data.client+":"+data.msg+"\r\n";
 sendMsg.value="";
 });

</script>

</body>
</html>

 

cmd 在项目文件夹下执行命令

npm install -g express-generator

npm install socket.io

npm install express

执行node server.js启动服务

 

supper宇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 使用socket.io实现聊天室
小白兔奶糖の博客
12-08 1905
使用socket.io可以实现聊天室的实时通信功能，完整的聊天室功能还需要处理用户登录、发送图片、语音等功能，这里只是简单介绍了如何使用socket.io实现实时通信。除了使用socket.io实现实时通信，也可以使用其他的技术实现，如WebSocket、HTTP Long Polling等。消息的推送：需要实现消息的推送功能，在用户发送消息时，将消息推送给其他用户。用户登录：需要实现用户注册、登录功能，并将用户信息存储在后端服务器中。消息的存储：需要将消息存储在数据库中，方便以后查询历史消息。
socket.io实现多人聊天
weixin_45674255的博客
10-30 1176
使用socket.io模拟实现多人聊天室
使用socket.io制做简易WEB聊天室
08-28
主要为大家详细介绍了使用socket.io制做简易WEB聊天室，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
socket.io搭建聊天室
volit的博客
12-26 826
socket.io是一个可以在客户端和服务器之间实现低延迟,双向和基于事件的通信的库。它建立在websocket之上，且当浏览器不支持websocket时会自动切换为HTTP长轮询或自动重新连接。ps.虽然socket.io可能使用websocket进行传输，但是由于它为每个数据包添加了额外的元数据，所以websocket客户端无法连接socket.io客户端，而socket.io客户端同样也无法连接websocket客户端。
socket.io html5 聊天,socket.io实现在线聊天页面
weixin_39539807的博客
06-23 273
一.要点分析(1) 对于socket.io，它是基于事件响应的socket,可以进行长时间的消息传递。其服务端使用的方法主要不过就是两个,on()和emit()io.on('connetcion',function(socket) {socket.on('event',function(data) {/*执行相应的方法*///通知客户端执行事件socket.emit('new event',{da...
socket.io php 聊天室,WebSocket学习（一）——基于socket.io实现简单多人聊天室
weixin_31327207的博客
03-26 440
前言什么是Websocket呢？我们都知道在Http协议中，客户端与服务器端的通信是靠客户端发起请求，然后服务器端收到请求再进行回应，这个过程中，客户端是主动的，服务器端是被动的。Websocket协议就不一样了，它是基于TCP的一种新的网络协议，它与Http协议不同之处就在于Websocket能实现服务器端主动推送消息到客户端，服务器端与客户端都能发起通信，这一次，服务器端终于也拥有了主动权。什...
socket.io php 聊天室,利用express+socket.io实现一个简易版聊天室
weixin_32009069的博客
03-26 262
写在前面最近由于利用node重构某个项目，项目中有一个实时聊天的功能，于是就研究了一下聊天室，在线demo|源码，欢迎大家反馈。这个聊天室的主要利用到了socket.io和express。这个聊天室支持群聊，私聊，支持发送图片(PS：大家在体验时最好开启两个浏览器，自问自答)。下面就来和大家分享下实现过程：WebSocketHTML5一种新的协议。它实现了浏览器与服务器全双工通信。为了更好的理解W...
socket.io html5 聊天,WebSocket探讨之——socket.io搭建多聊天室
weixin_35924166的博客
06-23 530
本博文出自我的小笔记socket.io搭建多聊天室，随手分享给大家。html5新兴的API给前端开发者带来了难以抑制的兴奋，除了前端的API，html5还提供了一些有里程碑意义的前后端通信API，WebSocket就是这其中之一。WebSocket的目标是在一个单独的持久连接上提供全双工、双向通信。WebSocket前世今生WebSocket是html5的一种新协议，在它出现之前，浏览器与服务器之...
Socket.io 聊天室（代码已开源）
一个头发贼多的小火鸡
10-26 986
1.启发 1.1 最近得闲有空玩一下Socket.io跟RabbitMQ所以造个小项目自己玩玩。 1.2 当然不是正式项目，个人复习 测试所用。设计部分有的地方也不太合理，UI也是随便弄的。 1.3 有个BUG，这个问题我只在Web端遇到过。描述：Web连接 socket.io 后如果刷新Web页面会导致Socket.io连接有缓存，但是后台监听Socket连接已经断开，如果发生消息有可能会发生至上次连接的socket.id连接上。导致消息丢失。此问题只有在Web上面遇到过，如果有大佬知道是什么...
socket.io.js下载
01-27
socket.io.js是Socket.IO库的核心JavaScript文件，它包含了Socket.IO客户端的所有功能。在网页中引入这个文件，开发者就可以开始使用Socket.IO与服务器进行实时通信。 使用Socket.IO的步骤通常包括以下部分： 1. *...
Node.js websocket使用socket.io库实现实时聊天室
01-02
之前用java jsp写过一个聊天，其实实现逻辑并不难，只是大部分时间都用在UI的设计上，其实现原理就是一个基于websocket的通信，要想做一个好的聊天室，我觉得大部分精力可能更应该花在与用户的视觉层交互上。...
使用socket.io实现简单聊天室案例
08-28
socket.io 实现简单聊天室案例总结 本篇文章主要介绍了使用 socket.io 实现简单聊天室案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。 标题解释 使用 socket.io 实现简单聊天室案例的标题，简单来说，...
使用 Node.js 和 Socket.io 构建实时聊天应用程序
qq_33003143的博客
07-11 1739
通过简易实时聊天室学习socketio的使用
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jupyterlab_broccoli_turtle-0.4.7-py3-none-any.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pillow-10.4.0-cp311-cp311-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
vue socket.io聊天室
07-31
然后，在后端使用Node.js和Express框架创建一个服务器，并安装socket.io作为后端聊天室的依赖项。接下来，你需要在服务器端引入socket.io并启动服务器，在客户端引入socket.io并连接服务器。在服务器端，你可以监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值