JS实现简易多人在线聊天室

时间:2024-05-21 13:08:36

一、设计要求:
1)用户应通过用户名,密码登录聊天室
2)聊天室可以显示所有在线用户
3)在每一条聊天内容之前,显示发出这条聊天内容的用户名。
4)聊天室可以用web,客户端,或者纯文本方式实现。
5)当用户进入和离开聊天室时,系统会在聊天室里广播。

二、功能实现
1、登录功能:
提前设置一个含有用户名和密码的对象作为数据库,点击登录时通过事件绑定获取两个输入框的内容,遍历数据库每个数据将用户名和密码同时匹配的重定向到首页,同时将用户名通过通过URL参数传递给首页。如果遍历完不匹配,则弹出警示框:“昵称或密码错误”。
2、显示用户功能:
每次用户进入聊天室时将用户名存储于服务器端的一个users数组,再将这个包含所有在线用户的的数组发送给所有用户,在客户端先删去列表里所有在线用户,再将最新接收到的users数组重新渲染。当用户离开的时候,同样通过更新数组删去该用户,再发送给其他客户端重新渲染。
3、显示用户名:
定义一个文本输入框,点击按钮时获取输入框的内容,定义一个对象,包含内容与该用户名,同时发送给服务器端,由服务器端发送给其他客户端,客户端将接收到的内容和用户名添加到聊天显示框中。
4、登入登出提示:
在用户登入登出时与服务器发起通信,将名字发送给服务器端,服务器端再发送给其他客户端,客户端将接收到用户名添加到聊天显示框中。

三、效果图
JS实现简易多人在线聊天室
JS实现简易多人在线聊天室
代码:https://github.com/cherublin/socket