websocket的网页版聊天demo
技术选择对比:
image.png
开发采用websocket:
websocket启动类:
image.png
Websocket初始化器编写:
image.png
image.png
在启动器加上子处理器:
image.png
自定义handler:
image.png
编写重写的handler方法:
image.png
现在可以获取到客户端的信息了,需要注意的是,需要把接收到的msg转换成对应的frame载体:
有大量client群发送的时候选择下面的那种
image.png
自定义类写完后需要在初始化器那里注册上
image.png
image.png
Websocket api
image.png
前端页面编写:
image.png
先建立一个CHAT对象,CHAT对象里包含了socket属性,和各类方法
注意前后端websocket的路径一致,该路径在初始化器里:
image.png
image.png
最后完成chat方法:
image.png
测试:
image.png
发现报错,查找了下是前后端端口号没对应上,将端口号和后端一致,改为8088
image.png
image.png
测试成功,关闭浏览器后:
image.png
也显示了长id和短id
再测试一次:
image.png
frames这种载体里,绿色向上箭头(上传)是客户端发给服务端的,而红色向下箭头(下载)是服务端发给客户端的
京公网安备 11010502036488号