WebSocket+HTML5实现在线聊天室

简介:
最近在看HTML5的东西,我比较感兴趣的是WebSockets,WebWorker以及CORS。去官方过了下WebSockets的规范。WebSockets在Web层实现了TCP协议来进行双向通信,使得程序员们不用再苦逼苦的以各种方式模拟这种双向通信了。

这里用纯WebSockets+HTML5的一些新特性实现了一个在线聊天室的功能。
前端是我永远的痛,好在有Bootstrap:)
服务端基于mod_pywebsocket,客户端就一个html。
实现一个聊天室不难,实现一个稳定的聊天室就要多做些工作了。
使用心跳包定时kill掉无动作的客户端,解决了非正常退出聊天室造成的zombie连接。
数据对象以json的形式在客户端和服务端之间传送
 
当然还有页面上的一些细节:当前用户名粗体显示,头像识别性别等。 
没有实现太多其他的功能,实际体验下WebSockets就好了。
 
mod_pywebsocket的安装过程不说了,下载源码包然后执行install.py。
启动客户端,standlone,py位于mod_pywebsocket的源码包中。
 
 
  1. python standlone.py -p 2012 -d /root/Destop/talk2me/ 
 
然后浏览器直接访问127.0.0.1:2012/chatroom.html即可

模拟一段基友聊天场景作为YY:

源码下载 



















本文转hackfreer51CTO博客,原文链接:http://blog.51cto.com/pnig0s1992/1049817,如需转载请自行联系原作者

相关文章
|
1月前
|
前端开发 JavaScript Java
【十五】springboot整合WebSocket实现聊天室
【十五】springboot整合WebSocket实现聊天室
35 0
|
8月前
|
Java
基于Tomcate、java、websocket 简单在线聊天
基于Tomcate、java、websocket 简单在线聊天
78 0
|
Web App开发 存储 缓存
HTTP,WebSocket 和 聊天室
HTTP,WebSocket 和 聊天室
134 0
|
7月前
|
移动开发 缓存 网络协议
html5:webSocket 基础使用
html5:webSocket 基础使用
74 0
|
7月前
|
移动开发 前端开发 网络协议
WebSocket网页聊天室
WebSocket网页聊天室
109 0
|
9月前
|
存储
Netty入门到超神系列-基于WebSocket开发聊天室
在很多的网站中都嵌入有聊天功能,最理想的方式就是使用WebSocket来开发,屏幕面前的你如果不清楚WebSocket的作用可以自己去百度一下,Netty提供了WebSocket支持,这篇文章将使用Netty作为服务器,使用WebSocket开发一个简易的聊天室系统。
201 0
|
11月前
|
移动开发 前端开发 网络协议
前端祖传三件套HTML的HTML5之WebSocket
当今互联网技术飞速发展,尤其是前端领域的变化更是日新月异。在这样一个快速更新的环境下,我们不得不重新审视前端祖传三件套之一的HTML技术,并学习其中的最新进展。本文将着重介绍HTML5中的WebSocket技术。
82 0
|
移动开发 网络协议 前端开发
为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统
websocket是个啥? webSocket是一种在单个TCP连接上进行全双工通信的协议 webSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输
为美多商城(Django2.0.4)添加基于websocket的实时通信,主动推送,聊天室及客服系统
|
存储 移动开发 JavaScript
【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室
这篇文章主要是用WebSocket技术实现一个即时通讯聊天室。从0到1一步一步的编写所有代码,上手容易
486 0
【你的第一个socket应用】Vue3+Node实现一个WebSocket即时通讯聊天室
|
网络协议 前端开发 安全
websocket和http的瓜葛以及websocket协议实现
websocket和http的瓜葛以及websocket协议实现
websocket和http的瓜葛以及websocket协议实现