前言
最近项目中用到
视频直播技术
,弹幕用WebSocket制作再合适不过了,上一篇文章讲了html5的sse服务器发送事件,这节课谈谈websocket。及socket.io制作简单聊天室。关于nodejs创建简单的聊天室,我之前的一篇文章写过,具体可以看:http://www.haorooms.com/post/nodejs_rmyyong
创建 WebSocket 对象
用以下 方法 创建 WebSocket 对象。
[JavaScript]
纯文本查看
复制代码
1 | var Socket = new WebSocket(url, [protocol] ); |
以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议
WebSocket 属性
以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象:
[JavaScript]
纯文本查看
复制代码
1 | Socket.readyState |
只读属性 readyState 表示连接状态,可以是以下值:
[JavaScript]
纯文本查看
复制代码
1 2 3 4 5 6 7 | 0 - 表示连接尚未建立。1 - 表示连接已建立,可以进行通信。2 - 表示连接正在进行关闭。3 - 表示连接已经关闭或者连接不能打开。 |
[JavaScript]
纯文本查看
复制代码
1 | Socket.bufferedAmount |
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。
WebSocket 事件
[JavaScript]
纯文本查看
复制代码
1 2 3 4 5 6 7 | open Socket.onopen 连接建立时触发message Socket.onmessage 客户端接收服务端数据时触发error Socket.onerror 通信发生错误时触发close Socket.onclose 连接关闭时触发 |
WebSocket 方法
以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:
[JavaScript]
纯文本查看
复制代码
1 2 | Socket.send() 使用连接发送数据Socket.close() 关闭连接 |
nodejs启动服务:
[JavaScript]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 | var app = require('http').createServer()var io = require('socket.io')(app);app.listen(8008);io.on('connection', function (socket) { socket.emit('news', { hello: 'world' }); socket.on('my other event', function (data) { console.log(data); });}); |
前台接受,要引入socket.io.js
[JavaScript]
纯文本查看
复制代码
1 2 3 4 5 6 | <script src="socket.io.js"></script> var socket = io('ws://localhost:8008'); socket.on('news', function (data) { console.log(data); socket.emit('my other event', { my: 'data' }); }); |
原帖地址:https://www.haorooms.com/post/html5_websocket