炫意html5
最早CSS3和HTML5移动技术网站之一

HTML5的WebSocket的介绍及应用

前言

最近项目中用到视频直播技术,弹幕用WebSocket制作再合适不过了,上一篇文章讲了html5的sse服务器发送事件,这节课谈谈websocket。及socket.io制作简单聊天室。关于nodejs创建简单的聊天室,我之前的一篇文章写过,具体可以看:http://www.xyhtml5.com/post/nodejs_rmyyong

创建 WebSocket 对象

用以下 方法 创建 WebSocket 对象。

var Socket = new WebSocket(url, [protocol] );

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议

WebSocket 属性

以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象:

Socket.readyState    

只读属性 readyState 表示连接状态,可以是以下值:

0 – 表示连接尚未建立。

1 – 表示连接已建立,可以进行通信。

2 – 表示连接正在进行关闭。

3 – 表示连接已经关闭或者连接不能打开。

Socket.bufferedAmount    

只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

WebSocket 事件

open    Socket.onopen    连接建立时触发
message    Socket.onmessage    客户端接收服务端数据时触发
error    Socket.onerror    通信发生错误时触发
close    Socket.onclose    连接关闭时触发

WebSocket 方法

以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象:

Socket.send()     使用连接发送数据
Socket.close()    关闭连接

创建webSocket服务

具体可以看:https://github.com/sitegui/nodejs-websocket

关于webSocket入门,我看到慕课网上有老师讲关于“基于Websocket的火拼俄罗斯”,感兴趣的可以去看一下!
关于这个老师讲的相关代码,我稍加改进,以放到github,具体请看:https://github.com/confidence68/demoOfSocket
这个课程入门Websocket还是很不错的!

socket.io

socket.io是改进版的WebSocket,地址是:https://socket.io/

nodejs启动服务:

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

<script src="https://www.xyhtml5.com/post/html5_websocket/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://github.com/confidence68/demoOfSocket/tree/master/demo6

PHPSocket.IO

是仿照nodejs Socket.IO编写的,地址:http://www.workerman.net/phpsocket_io

前台用法都一样,关于服务端,请看上面地址。

炫意HTML5 » HTML5的WebSocket的介绍及应用

Java基础教程Android基础教程