WebSocket(socket.io + node.js)聊天室

最新推荐文章于 2022-10-13 17:54:49 发布
最新推荐文章于 2022-10-13 17:54:49 发布
阅读量350 收藏 5
点赞数 1
文章标签： node.js javascript jquery 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WILLCSDNKK/article/details/115984216
版权

记录项目：

制作一个基于socket.io和node.js的聊天室

socket.io的api用法详细看https://socket.io/

前端效果显示：

1.登录界面

2.群聊页面

3.私聊页面

前端页面分三个盒子1.登录盒子2.群聊盒子3.私聊盒子

逻辑：登录username作为唯一标识，在登录时用户名设置为不允许重复；登录成功登录盒子display:none,群聊盒子display:block;左侧用户栏点击私聊人头像将私聊盒子打开，群聊盒子隐藏；再次点击就回到群聊盒子

 

服务端骨架

app.js(本文件是服务器端代码)

1.安装所需依赖（express快速开发node.js骨架，socket.io用于项目socket通信）

npm install express 

npm install socket.io

2.先在app.js将依赖码上

3.目录文件与路径

登录部分（socket）

客户端利用socket.emit将用户名和头像发送至服务器，服务器判断是送来的用户名是否已经被注册，没被注册则登陆成功,利用io.emit将用户的基本信息以及用户列表广播给客户端。

客户端收到数据则可以将数据渲染出来，功能可以实现某某某加入了

最低0.47元/天 解锁文章
WILLCSDNKK
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Nodejs+socket.io 搭建个人的网页聊天室
weixin_44596735的博客
01-31 4375
最近看到别人搭建了自己的实时聊天室便产生了兴趣，于是乎自己也着手搭建了一个。在socket这里我选用了socket.io这个模块，在网上看了很多的博客不过还是一头雾水，于是上了socket.io的官网看了下soket.io的各个内置函数以及事件。网址：https://socket.io/get-started/chat/ 虽然是英文的，不过慢慢看还是能够看懂的 下面是实现过程 首先服务器需要配置...
聊天室 完整版 socket nodejs ejs bootstrap js
最新发布
06-17
基于 Node.js、Express、EJS、Socket.IO、jQuery 和 Bootstrap 的聊天室应用 用户需要先输入昵称，然后才能进入聊天室。输入消息并点击发送，消息将实时显示在所有连接的客户端上，并带有用户头像和背景图片，同时消息在左右分布，看起来有来有回的效果。
使用 socket.io.js 实现 websocket 实时通讯
热门推荐
小皮咖的博客
03-28 4万+
背景 最近公司在做一个快递柜项目，需要与快递柜设备端进行实时通讯，因此接触了 websocket. websocket 作用 简单的说： 传统 http 通讯一次交互数据后就断开连接了，服务端没法主动向客户端推送信息。 而长连接的 websocket 解决了这一问题 下面会有一个简单的例子介绍 socket.io.js 的使用 github 代码地址 将...
使用node、Socket.io 搭建简易聊天室
编码世界
09-19 1389
Socket.io是一个WebSocket库，会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，而且支持的浏览器最低达IE5.5。 Socket.io 服务器 和 Socket.io 客户端之间`全双工通信信道` **尽可能**使用WebSocket 连接建立(”尽可能“就说明要求客户端和服务端都必须使用http://socket.io的解决方案)，并将使用` HTTP 长轮询`作为后备。
使用Node.js+Socket.IO搭建WebSocket实时应用 分类： ...
weixin_30570101的博客
06-29 746
Web领域的实时推送技术，也被称作Realtime技术。这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。它有着广泛的应用场景，比如在线聊天室、在线客服系统、评论系统、WebIM等。本文就让我们来看看如何搭建一个Web实时应用。 AD：WOT2014：用户标签系统与用户数据化运营培训专场 51CTO主办WOT全球软件技术峰会直减百元优惠活动 抢票进...
js连接websocket
m0_70556273的博客
10-13 5146
/申请一个WebSocket对象，参数是服务端地址，同http协议使用http://开头一样，WebSocket协议的url使用ws://开头，另外安全的WebSocket协议使用wss://开头。本文章向大家介绍js连接websocket，主要包括js连接websocket使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。原文地址：https://www.cnblogs.com/lijiayong/p/14152092.html。//将消息发送到服务端。
node.js+socket.io离线包+聊天室源码
09-05
来源于网上的博文，我对源码做了一些增强，并把需要的node.js、socket.io、jQuery、服务端和客户端源码，全部打在一起（node.js的npm需要在线安装，聊天室样例也有引用到互联网上的js文件，我把它们全部都本地化了，...
Node.js websocket使用socket.io库实现实时聊天室
01-02
之前用java jsp写过一个聊天，其实实现逻辑并不难，只是大部分时间都用在UI的设计上，其实现原理就是一个基于websocket的通信，要想做一个好的聊天室，我觉得大部分精力可能更应该花在与用户的视觉层交互上。...
node.js+socket.io+websocket使用demo
10-13
node.js 的socket.io的使用，适合nodejs初学者，超精简的node.js websocket网页聊天室DEMO，虽然是很基础，但你至少得会配置nodejs，会敲hello world吧。
vue.js+node.js+mysql在线聊天室源码
06-13
在这个聊天室项目中，Node.js作为后端服务器，负责处理用户的请求，如登录、发送消息、接收消息等，并通过socket.io实现实时通信。 【Socket.io】 Socket.io 是一个实时应用库，它在客户端和服务器之间建立实时、...
Node.js-NodeJSSocket.io实现的一个在线聊天室
08-10
NodeJS Socket.io 实现的一个在线聊天室
websocket相关js库 socket.io
03-06
socket.io.js库,在HTML页面[removed][removed]像引用其他脚本一样导入就可以了
nodeJS+websocket创建聊天室
weixin_43970400的博客
05-19 645
nodeJS websocket 聊天室 websocket创建简单的聊天室 多人聊天室
vue+websocket+nodejs实现聊天室 - 消息已读未读
xiaoyingyings的博客
03-06 5600
前言 上一篇讲了聊天室增加一对一单聊，这次讲如何新增已读未读状态。 大概思路： 服务器返回消息列表，增加参数status为1，单聊和群聊通过过滤状态区分对应未读数量，当前聊天，直接在currentMessage里面设置status为0即可。 效果图： 上代码： 服务端： 其他的跟之前都一样，只是type为2时候，新增了status:1 ... broadcast({ type: 2, nickname: obj.nickname, uid: obj.uid,
Socket.io在线聊天室
fens的博客
08-22 276
从零开始nodejs系列文章，将介绍如何利Javascript做为服务端脚本，通过Nodejs框架web开发。Nodejs框架是基于V8的引擎，是目前速度最快的Javascript引擎。chrome浏览器就基于V8，同时打开20-30个网页都很流畅。Nodejs标准的web开发框架Express，可以帮助我们迅速建立web站点，比起PHP的...
Node.js + express + socket 实现在线实时多人聊天室
Cyan1614的博客
06-25 1万+
项目目录结构： 前端部分： 登录页面Login部分： login.html login LOGIN
基于websocket与nodejs-websocket的简单聊天室
DreamFJ的博客
08-16 2165
1.项目目录： websocketChatRoom index.html(客户端) wsServer.js(服务器) 2.安装nodejs-websocket（https://www.npmjs.com/package/nodejs-websocket） npm install nodejs-websocket 3.index.html <!DOCTYPE html&g...
用node.js构建websocket简单的聊天室
weixin_43605299的博客
02-16 342
websocket   实现聊天室一般是用长连接的方式实现，而不用轮询。轮询每次请求都要额外消耗资源，并且做不到瞬时聊天(除非轮询时间间隔很短)。   websocket是一种长连接，双工通信(客户端可向服务端发送消息。服务端可向客户端发送消息，这是ajax做不到的。) node的socket.io模块   这次构建我所用的是socket...
nodejs socket.io实现多人聊天室
05-05
以下是使用 Node.js 和 Socket.io 实现多人聊天室的基本步骤： 1. 安装 Node.js 和 Socket.io 首先需要安装 Node.js 和 Socket.io。可以在 Node.js 官网下载并安装 Node.js，然后在命令行中使用以下命令安装 Socket.io： ``` npm install socket.io ``` 2. 创建服务器 创建一个 Node.js 服务器，并在其中引入 Socket.io 模块。创建一个 HTTP 服务器，并使用 Socket.io 将其升级为 WebSocket 服务器。 ```javascript const http = require('http'); const express = require('express'); const socketIO = require('socket.io'); const app = express(); const server = http.createServer(app); const io = socketIO(server); server.listen(3000, () => { console.log('Server listening on port 3000'); }); ``` 3. 监听连接事件 使用 Socket.io 监听 `connection` 事件，当有新的客户端连接到服务器时，触发该事件。 ```javascript io.on('connection', (socket) => { console.log('New client connected'); }); ``` 4. 处理消息事件 在连接事件中，可以监听 `message` 事件，以接收客户端发送的消息。当接收到消息时，将其广播给所有连接到服务器的客户端。 ```javascript io.on('connection', (socket) => { console.log('New client connected'); socket.on('message', (message) => { console.log('Received message: ', message); io.emit('message', message); }); }); ``` 5. 创建客户端 创建一个 HTML 页面作为客户端，使用 Socket.io 连接到服务器，并监听 `message` 事件以接收其他客户端发送的消息。 ```html <!DOCTYPE html> <html> <head> <title>Chat Room</title> <script src="/socket.io/socket.io.js"></script> <script> const socket = io(); socket.on('message', (message) => { const li = document.createElement('li'); li.innerText = message; document.getElementById('messages').appendChild(li); }); function sendMessage() { const input = document.getElementById('messageInput'); socket.emit('message', input.value); input.value = ''; } </script> </head> <body> <ul id="messages"></ul> <input type="text" id="messageInput"> <button onclick="sendMessage()">Send</button> </body> </html> ``` 6. 运行程序 运行 Node.js 服务器，并在浏览器中打开客户端页面。多个客户端连接到服务器后，可以在聊天室中发送消息。 这就是使用 Node.js 和 Socket.io 实现多人聊天室的基本步骤。当然，还可以添加许多其他功能，例如用户身份验证、私人消息等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值