博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
websocket搭建简单的网页聊天室框架【续1】
阅读量:6269 次
发布时间:2019-06-22

本文共 717 字,大约阅读时间需要 2 分钟。

聊天室的链接已经失效!因为我部署了一个新的网站,欢迎大家访问


在这篇文章中,我们简单实现了一个websocket聊天室,我又花了一些时间写了个稍微复杂一点点的,大家可以通过进入聊天室或访问。


进入这个聊天室后,输入名字和内容就可以发送消息了,其他所有连接了的客户端都能收到消息,并且支持头像显示(从设定的9张图片里选择),背景色区分是自己发的内容还是别人发的内容(后端通过IP判断)。截图如下:

clipboard.png

欢迎大家~


简单再说一下一些细节的及其实现:

1.当名字和内容有一个为空时,无法发送信息,对应的文本框outline颜色为红色(有内容则为蓝色),点击发送时焦点会回到空的文本框中,发送的信息字数超过200时,字数统计处颜色变红,且发送按钮变成disabled状态,这部分是通过AngularJS实现的。

2.点击姓名文本框左边的小头像弹出头像选择框如图,实际上这是一个隐藏了的<div>元素,点击图片后就设置为显示,点击对应的图片就设置了头像,也是通过AngularJS实现的。

3.本例中,发送一条信息后,服务器接受到了信息,并不是通过websocket返回信息内容给所有客户端,而是服务器收到并保存了信息之后,发送一条不带数据的websocket消息给所有客户端,客户端收到这条消息再发送普通的http请求给服务器,要求返还最近一条保存的信息,服务器通过该http请求的IP判断客户端是否是发送信息的那个客户端,并给信息加上status属性(selfother)返回给客户端,客户端浏览器渲染时根据status给信息内容添加不同的背景(绿色或灰色)。


2018年3月19日,增加回车发送消息的功能,并对js代码进行了压缩,可看源码。

转载地址:http://ouvpa.baihongyu.com/

你可能感兴趣的文章
input checkbox 复选框大小修改
查看>>
网吧维护工具
查看>>
BOOT.INI文件参数
查看>>
vmstat详解
查看>>
新年第一镖
查看>>
unbtu使用笔记
查看>>
MaxCompute 学习计划(一)
查看>>
OEA 中 WPF 树型表格虚拟化设计方案
查看>>
Android程序开发初级教程(一) 开始 Hello Android
查看>>
使用Gradle打RPM包
查看>>
“我意识到”的意义
查看>>
淘宝天猫上新辅助工具-新品填表
查看>>
再学 GDI+[43]: 文本输出 - 获取已安装的字体列表
查看>>
nginx反向代理
查看>>
操作系统真实的虚拟内存是什么样的(一)
查看>>
hadoop、hbase、zookeeper集群搭建
查看>>
python中一切皆对象------类的基础(五)
查看>>
modprobe
查看>>
android中用ExpandableListView实现三级扩展列表
查看>>
%Error opening tftp://255.255.255.255/cisconet.cfg
查看>>