利用html5的websocket实现websocket聊天室


Posted in HTML / CSS onDecember 12, 2013

什么是websocket

 WebSocket 协议是html5引入的一种新的协议,其目的在于实现了浏览器与服务器全双工通信。看了上面链接的同学肯定对过去怎么低效率高消耗(轮询或comet)的做此事已经有所了解了,而在websocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。同时这么做有两个好处
 
1.通信传输字节减少:比起以前使用http传输数据,websocket传输的额外信息很少,据百度说只有2k
 
2.服务器可以主动向客户端推送消息,而不用客户端去查询
 
关于概念和好处,网上到处都是,不再赘述,简单看看其原理,然后动手写一个web版聊天室吧
 
握手

除了TCP连接的三次握手,websocket协议中客户端与服务器想建立连接需要一次额外的握手动作,在最新版的协议中是这个样子的
 
客户端向服务器发送请求
 

复制代码
代码如下:

GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Host: 127.0.0.1:8080
Origin: <a href="http://test.com">http://test.com</a>
Pragma: no-cache
Cache-Control: no-cache
Sec-WebSocket-Key: OtZtd55qBhJF2XLNDRgUMg==
Sec-WebSocket-Version: 13
Sec-WebSocket-Extensions: x-webkit-deflate-frame
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.57 Safari/537.36

服务器给出响应
 

复制代码
代码如下:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: xsOSgr30aKL2GNZKNHKmeT1qYjA=

在请求中的“Sec-WebSocket-Key”是随机的,服务器端会用这些数据来构造出一个SHA-1的信息摘要。把“Sec-WebSocket-Key”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用 SHA-1 加密,之后进行 BASE-64编码,将结果做为 “Sec-WebSocket-Accept” 头的值,返回给客户端(来自维基百科)。
 
websocket API

经过握手之后浏览器与服务器建立连接,两者就可以互相通信了。websocket的API真心很简单,看看W3C的定义
 

复制代码
代码如下:

enum BinaryType { "blob", "arraybuffer" };
[Constructor(DOMString url, optional (DOMString or DOMString[]) protocols)]
interface WebSocket : EventTarget {
readonly attribute DOMString url;

// ready state
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSING = 2;
const unsigned short CLOSED = 3;
readonly attribute unsigned short readyState;
readonly attribute unsigned long bufferedAmount;

// networking
attribute EventHandler onopen;
attribute EventHandler onerror;
attribute EventHandler onclose;
readonly attribute DOMString extensions;
readonly attribute DOMString protocol;
void close([Clamp] optional unsigned short code, optional DOMString reason);

// messaging
attribute EventHandler onmessage;
attribute BinaryType binaryType;
void send(DOMString data);
void send(Blob data);
void send(ArrayBuffer data);
void send(ArrayBufferView data);
};


创建websocket
 
复制代码
代码如下:

ws=new WebSocket(address); //ws://127.0.0.1:8080

 
调用其构造函数,传入地址,就可以创建一个websocket了,值得注意的是地址协议得是ws/wss
 
关闭socket
复制代码
代码如下:

ws.close();

 
调用webservice实例的close()方法就可以关闭webservice,当然也可以传入一个code和string说明为什么关了
 
几个回调函数句柄
 
由于其异步执行,回调函数自然少不了,有四个重要的
 
onopen:连接创建后调用
onmessage:接收到服务器消息后调用
onerror:出错时调用
onclose:关闭连接的时候调用

看名字就知道是干什么的了,每个回调函数都会传入一个Event对象,可以通过event.data访问消息
 
使用API
 
我们可以在创建socket成功后为其回调函数赋值
 

复制代码
代码如下:

ws=new WebSocket(address);
ws.onopen=function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server > connection open.";
msgContainer.appendChild(msg);
ws.send('{<'+document.getElementById('name').value+'>}');

 也可以通过事件绑定的方式
复制代码
代码如下:

ws=new WebSocket(address);
ws.addEventListener('open',function(e){
var msg=document.createElement('div');
msg.style.color='#0f0';
msg.innerHTML="Server > connection open.";
msgContainer.appendChild(msg);
ws.send('{<'+document.getElementById('name').value+'>}');

客户端实现
其实客户端的实现比较简单,除了websocket相关的几句就是一些自动focus、回车键事件处理、消息框自动定位到底部等简单功能,不一一说明了

HTML / CSS 相关文章推荐
CSS3属性选择符介绍
Oct 17 HTML / CSS
CSS3让登陆面板3D旋转起来
May 03 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
Aug 16 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
Dec 29 HTML / CSS
css和css3弹性盒模型实现元素宽度(高度)自适应
May 15 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
html5通过postMessage进行跨域通信的方法
Dec 04 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 #HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 #HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 #HTML / CSS
html5教程画矩形代码分享
Dec 04 #HTML / CSS
html5教程制作简单画板代码分享
Dec 04 #HTML / CSS
html5 viewport使用方法示例详解
Dec 02 #HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 #HTML / CSS
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP防盗链的基本思想 防盗链的设置方法
2015/09/25 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
用jquery来定位
2007/02/20 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
nodejs实现黑名单中间件设计
2014/06/17 NodeJs
Javascript表单验证要注意的事项
2014/09/29 Javascript
jQuery原生的动画效果
2015/07/10 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
js 两个日期比较相差多少天的实例
2017/10/19 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python自定义线程池实现方法分析
2018/02/07 Python
Python入门之后再看点什么好?
2018/03/05 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python使用多进程的实例详解
2018/09/19 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Nike香港官网:Nike HK
2019/03/23 全球购物
机械专业应届毕业生自荐书
2014/06/12 职场文书
垃圾桶标语
2014/06/24 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
2019年励志签名:致拼搏路上的自己
2019/10/11 职场文书
Oracle笔记
2021/04/05 Oracle
python中super()函数的理解与基本使用
2021/08/30 Python
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python