实现简易的群聊天室

进入对应的文件夹

npm init -y (将会生一个package.json描述当前项目的基本信息)
# 安装socket.io
npm install --save socket.io

整理业务场景与实现思路：

实现群聊。
1. 当打开群聊页面时，建立websocket连接，每当有客户端连接成功，即当做进入该群聊天室。
2. 点击发送按钮，可将自己写的消息，发送给服务端，由服务端转发给聊天室的所有人。
3. 客户端接收服务端返回的消息，显示在聊天记录列表中。
统计并更新在线人数。
1. 在服务端维护一个全局变量：count=0；用于表示当前在线人数。
2. 服务端一旦监听到客户端连接成功，count++
3. 服务端一旦监听到客户端连接断开，count--
4. 只要count一有变化，就需要向所有客户端发消息（countmsg），更新在线人数。
5. 客户端接收countmsg消息，更新人数即可。

服务器端 node.js

// 引入相关模块   监听客户端的连接
const http = require('http').createServer()
const socketio = require('socket.io')(http, { cors: {  origin:'*' }  // 允许所有域名访问
})let count = 0
// 监听连接的建立
socketio.on('connection', function(socket){console.log('有客户端进来了:' + socket.id)// 更新在线人数count++socketio.emit('countmsg', count)// 监听socket的断开，一旦连接断开，则count--socket.on('disconnect', function(){count--socketio.emit('countmsg', count)})// 监听客户端发过来的消息socket.on('textmsg', function(data){socketio.emit('textmsg', data)   // 收到什么就给所有客户端都发一遍})
})http.listen(5050, ()=>{console.log('服务器已启动...')
})

服务器端完成以后接下来就是我们的客户端,我们可以先准备一个登录页面,让用户注册自己的昵称,代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>微信聊天室</title><link rel="stylesheet" href="styles/normalize.css"><link rel="stylesheet" href="styles/reset.css"><link rel="stylesheet" href="styles/chart.css"></head><body><div id="login-container"><div class="login-title">微信聊天室</div><div class="login-user-icon"><img src="data:images/login.png" alt=""></div><div><input type="text" id="username" class="login-item login-username" placeholder="请输入聊天昵称"></div><div><input type="button" id="login" class="login-item login-button" value="登录"></div></div><script>login.onclick = function(){// 准备name与avatar名let name = username.valuelet avatar = Math.floor(Math.random()*100)+".jpg"window.location = `chart.html?name=${name}&avatar=${avatar}`}</script></body>
</html>

运行结果如下

用户登录以后就可以来到聊天界面进行聊天

如果用户没有注册昵就直接打开聊天界面就会跳转到登录页面

打开两个聊天室,进行检测

聊天页面的代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>微信聊天室</title><link rel="stylesheet" href="styles/normalize.css" /><link rel="stylesheet" href="styles/reset.css" /><link rel="stylesheet" href="styles/chart.css" /></head><body><div id="chart-container"><div class="chart-user-list" id="chart-user-list"><div class="user-item"><img src="data:images/avatar/15.jpg" alt="" />未知名</div></div><div class="chart-main-area"><div class="chart-main-title"><h1>微信聊天室(<span id="userNumber"></span>人)-<spanid="currentUser"></span></h1></div><div class="chart-list" id="chart-list"><!-- <div class="user-logined" id="user-logined"><span id="logined-user"></span>上线了</div> --><!-- <div class="chart-item"><div class="user-face"><img src="data:images/avatar/11.jpg" alt=""></div><div class="user-message">111</div></div> --></div><div class="chart-form"><div><textarea class="chart-form-message" id="message"></textarea></div><div><inputtype="button"id="send"class="chart-form-send"value="发表"/></div></div></div></div><script src="scripts/socket.io.js"></script><script>// 判断，如果不是登录过来的，则跳转回登录页面let search = decodeURI(window.location.search) // 拿到浏览器地址栏的查询字符串if (!search) {window.location = 'index.html'}let name = search.split('&')[0].split('=')[1]let avatar = search.split('&')[1].split('=')[1]console.log(`name:${name}    avatar:${avatar}`)// 更新页面中的头像与昵称let userInfoDiv = document.getElementById('chart-user-list')userInfoDiv.innerHTML = `<div class="user-item"><img src="data:images/avatar/${avatar}" alt="">${name}</div>`// 建立websocket连接let socket = io('http://127.0.0.1:8081')console.log('连接成功', socket)// 监听服务端返回的更新人数的消息socket.on('countmsg', function (data) {userNumber.innerHTML = data //更新span，显示最新的人数})// 监听服务端返回的消息socket.on('textmsg', function (data) {console.log('服务端发回：', data)// 追加到聊天记录列表中let list = document.getElementById('chart-list')let html = list.innerHTMLhtml += `<div class="chart-item"><div class="user-face"><img src="data:images/avatar/${data.avatar}" alt=""></div><div style="font-size:0.9em;">${data.name}</div><div class="user-message">${data.content}</div></div>`list.innerHTML = html// dom操作，使list的滚动条持续在底部list.scrollTop = list.scrollHeight})// 点击发表按钮，发送消息send.onclick = function () {if (message.value && message.value.length < 30)//发送消息 {content:xx, name:xx, avatar:xx}socket.emit('textmsg', {content: message.value,name,avatar,})message.value = ''}</script></body>
</html>

制作一个简易的即时聊天工具相关推荐

使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节查看作业目录需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具实现思路: 使用history对象中的 forward() 方法和 ...
android socket 简易聊天室 java服务器_利用Socket制作一个简易的Android聊天室
首先制作一个客户端,界面如下: 使用方法:启动后,首先在登录编辑框输入一个昵称,然后点击登录,上面灰色区域是聊天窗,其中会显示你的登录提示,显示其他人发的消息.在的登录成功后,可以在下面的发送编辑框内 ...
python语言视频-Python语言之Python3 实现简易局域网视频聊天工具
本文主要向大家介绍了Python语言之Python3 实现简易局域网视频聊天工具,通过具体的内容向大家展示,希望对大家学习Python语言有所帮助. 操作系统为 Ubuntu 16.04,OpenCV ...
Python3 实现简易局域网视频聊天工具
Python3 实现简易局域网视频聊天工具 1.环境操作系统为 Ubuntu 16.04 python 3.5 opencv-python 3.4.1.15 numpy 1.14.5 PyAudio ...
跨跃平台交流无极限——linux下如何使用即时聊天工具,跨跃平台交流无极限——Linux下如何使用即时聊天工具(一)...
I技应术用与跨跃平台交流无极限维普资讯 http://doc.xuehai.net o n I s o f i e n t@ c n i i c o m t . L n x下如何使用即时聊天工具 ...
ios开发xmpp仿微信即时聊天工具
最近在做一个项目,需要一个即时聊天工具,先打算有第三方环信(http://www.easemob.com),但是最终老板不允许,要自己开发用自己的服务器,哎!如果有需要的可以去看看这个环信,真的不错. ...
Android 开发即时聊天工具 YQ ：（四）获取好友列表
在Android 开发即时聊天工具 YQ :(三) 实现登陆功能中已经实现了登陆功能,离能聊天又近了一步了 :) 在实现聊天之前还有一个重要的东西,?没错,就是好友列表,没的好友你和谁聊呀,是吧, 嘿 ...
制作一个简易的计算器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
基于Nodejs开发的web即时聊天工具
由于公司需要开发web即时聊天的功能,开始时我们主要的实施方法是用jquery的ajax定时(10秒)轮询向服务器请求,由于是轮询请求,对服务器的压力比较大.我们网站上线的时间不长,访问量不是很大, ...
局域网即时聊天工具都有哪些？
在互联网普及的今天,使用即时聊天工具沟通交流在人们的日常生活和工作当中已经十分普及.但由于企业内部敏感信息通过互联网泄露的现象频发,不少企业出于安全性考虑只能转用局域网环境办公,在转用局域网环境办公后 ...

制作一个简易的即时聊天工具

实现简易的群聊天室

进入对应的文件夹

整理业务场景与实现思路：

服务器端 node.js

服务器端完成以后接下来就是我们的客户端,我们可以先准备一个登录页面,让用户注册自己的昵称,代码如下

制作一个简易的即时聊天工具相关推荐

最新文章

热门文章