webSocket实战-聊天室

原创 Gyoung杨广 教程 websocket 424阅读 2018-03-19 11:44:12 举报

(1)首先,晒一下结果

体验地址,这是我的个人网站,中间一个模块是聊天室:链接标题

(2)那么,什么是websocket

WebSocket是一种网络通信协议,很多高级功能都需要它。

那么我们有了HTTP协议,为啥还需要另外一个协议呢?答案很简单,因为HTTP协议有一个缺陷:通信只能由客户端发起。

最典型的场景就是聊天室,假如用HTTP协议的话,就只能去轮询获取服务端有没有消息了,而用WebSocket的话,服务端有新消息可以自动推送。

WebSocket协议在2008年诞生,2011年成为国际标准。所有的浏览器都已经支持了。

特点:

(1)服务端可以主动推送信息,属于服务器推送技术的一种。

(2)建立在TCP协议之上,服务端的实现比较容易。

(3)与HTTP协议有着良好的兼容性,默认端口也是80和443,并且握手阶段采用HTTP协议,因此握手时不容易屏蔽,能通过各种HTTP代理服务器。

(4)数据格式比较轻量,性能开销小,通信高效。

(5)可以发送文本,也可以发送二进制数据。

(6)没有同源限制,客户端可以与任意服务器通信。

(7)协议标识符是ws(如果加密,则为wss),服务器网址就是URL。

(3)主要客户端API

(1)WebSocket构造函数

var ws = new WebSocket(‘ws://localhost:8080’);

执行上面的语句之后,客户端就会与服务器进行连接。

(2)webSocket.readyState

readyState属性返回实例对象的当前状态,共有四种。CONNECTING:值为0,表示正在连接。OPEN:值为1,表示连接成功,可以通信了。CLOSING:值为2,表示连接正在关闭。CLOSED:值为3,表示连接已经关闭,或者打开连接失败。

(3)webSocket.onopen

实例对象的onopen属性,用于指定连接成功后的回调函数

ws.onopen = function(){}

如果要指定多个回调函数,可以使用addEventListener方法。

ws.addEventListener(‘open’,function(event){});

(4)webSocket.onclose

实例对象的onclose属性,用于指定连接关闭后的回调函数。

(5)webSocket.onmessage

实例对象的onmessage属性,用于指定收到服务器数据后的回调函数。

注意,服务器数据可能是文本,也可能是二进制数据(blob对象或Arraybuffer对象)

(6)webSocket.send()

实例对象的send()方法用于向服务器发送数据。

(7)webSocket.bufferedAmount

实例对象的bufferedAmount属性,表示还有多少字节的二进制数据没有发送出去,它可以用来判断发送是否结束。

(8)webSocket.onerror

实例对象的onerror属性,用于指定报错时的回调函数。

再推一波,哈哈,体验地址,这是我的个人网站,中间一个模块是聊天室:链接标题

感兴趣的小伙伴可以试试。

评论 ( 1 )
最新评论
lawrence 28 天前 1F

.club域名一个多少钱啊?