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

小编给大家分享一下怎么利用html5的websocket实现websocket聊天室，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联拥有一支富有激情的企业网站制作团队，在互联网网站建设行业深耕10多年，专业且经验丰富。10多年网站优化营销经验，我们已为上千中小企业提供了成都做网站、网站设计、外贸营销网站建设解决方案，按需求定制开发，设计满意，售后服务无忧。所有客户皆提供一年免费网站维护!

    什么是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（'{<'+document.getElementById（'name'）。value+'>}'）;

    也可以通过事件绑定的方式

    复制代码

    代码如下：

    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（'{<'+document.getElementById（'name'）。value+'>}'）;

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

看完了这篇文章，相信你对“怎么利用html5的websocket实现websocket聊天室”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！