怎么利用html5的websocket实现websocket聊天室


小编给大家分享一下怎么利用html5的websocket实现websocket聊天室,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!
什么是websocket
WebSocket协议是html5日期的一种新的协议,其目的在于实现了浏览器与服务器全双工通信。看了上面的链接的同学肯定对过去怎么低效率高消耗(从而或comet)的做此事已经有所了解了,而在websocketAPI中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。同时这样做有两个好处1.通信传输字节减少:比起以前使用http传输数据,websocket传输的额外信息很少,据百度说只有2k2.服务器可以主动向客户端推送消息,而不用客户端去查询关于概念和好处,网上到处都是,不再多余述,简单看看其原理,然后动手写一个网站版聊天室吧握手
除了TCP连接的三次握手,websocket协议中客户端与服务器想建立连接需要一次额外的握手动作,在最新版本的协议中是这个样子的客户端向服务器发送请求
复制代码
代码如下:
GET/HTTP/1.1升级:websocket连接:升级主机:127.0.0.1:8080来源:http://test.com语法:无缓存缓存控制:无缓存Sec-WebSocket-密钥:OtZtd55qBhJF2XLNDRgUMg==Sec-WebSocket-版本:13Sec-WebSocket扩展:x-webkit-deflate-frame用户代理:Mozilla/5.0(Macintosh;IntelMacOSX10_9_0)AppleWebKit/537.36(KHTML,例如Gecko)Chrome/31.0.1650.57Safari/537.36
服务器定义响应
复制代码
代码如下:
HTTP/1.1101交换协议升级:websocket连接:升级Sec-WebSocket-接受:xsOSgr30aKL2GNZKNHKmeT1qYjA=
在请求中的“Sec-WebSocket-Key”是随机的,服务器端会用这些数据来构造出一个SHA-1的信息摘要。把“Sec-WebSocket-Key”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密,之后进行BASE-64编码,将结果做为“Sec-WebSocket-Accept”头的值,返回给客户端(来自维基百科)。websocketAPI
通过web浏览器的API真心很简单,看看W3C的定义
复制代码
代码如下:
枚举BinaryType{“blob”,“arraybuffer”};[Constructor(DOMStringurl,可选(DOMString或DOMString[])协议))接口WebSocket:EventTarget{只读属性DOMStringurl;//就绪状态constunsignedshortCONNECTING=0;constunsignedshortOPEN=1;constunsignedshortCLOSING=2;constunsignedshortCLOSED=3;只读属性unsignedshortreadyState;readonly属性unsignedlongbufferedAmount;//联网属性EventHandleronopen;属性EventHandleronerror;属性EventHandleronclose;只读属性DOMString扩展;
只读属性DOMString协议;voidclose([Clamp]可选的无符号短代码,可选的DOMString原因);//消息传递属性EventHandleronmessage;属性BinaryTypebinaryType;无效send(DOMStringdata);无效send(Blob数据);无效send(ArrayBufferdata);无效send(ArrayBufferViewdata);};
创建websocket
复制代码
代码如下:
ws=newWebSocket(address);//ws://127.0.0.1:8080
调用其构造函数,预期地址,就可以创建一个websocket了,称为的是地址协议得是ws/wss关闭socket
复制代码
代码如下:
ws.close();
调用webservice实例的close()方法就可以关闭webservice,当然也可以引发一个代码和字符串说明为什么关了几个变量函数句柄而引起其初始化执行,从而函数自然少不了,有四个重要的onopen:连接创建后调用消息:接收到服务器消息后调用错误:错误时调用onclose:关闭连接的时候调用
看名字就知道是干什么的免费云主机域名了,每个其他函数都会预定一个事件对象,可以通过event.data访问消息使用API我们可以在创建套接字成功后为其设置函数赋值
复制代码
代码如下:
ws=newWebSocket(address);ws.onopen=function(e){varmsg=document.createElement(’div’);msg.style.color=’#0f0′;msg.innerHTML=“服务器>连接打开。”;msgContainer.appendChild(msg);ws.send('{}’);
也可以通过事件绑定的方式
复制代码
代码如下:
ws=newWebSocket(address);ws.addEventListener(’open’,function(e){varmsg=document.createElement(’div’);msg.style.color=’#0f0′;msg.innerHTML=“Server>connectionopen。”;msgContainer。appendChild(msg);ws.send('{}’);
客户端实现其实客户端的实现比较简单,除了websocket相关的几句就是一些自动聚焦,回车键事件处理,消息框自动定位到底部等简单功能,不一一说明了看完了这篇文章,相信你对“怎么利用html5的websocket实现websocket聊天室”有了一定的了解,如果想了解更多相关知识,欢迎关注百云主机行业资讯频道,感谢各位的阅读!

相关推荐: HTML中Li标签如何使用

本文小编为大家详细介绍“HTML中Li标签如何使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“HTML中Li标签如何使用”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。XML/HTML Code复制内容到剪贴板htmlPUBLIC…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 10/05 19:39
下一篇 10/07 07:55

相关推荐