基于 WebSocket 构建跨浏览器的实时应用
使用示例
1、使用 Node HTTP 服务器
服务端示例代码:
var app = require('http').createServer(handler)
, io = require('socket.io').listen(app)
, fs = require('fs')
app.listen(80);
function handler (req, res) {
fs.readFile(__dirname + '/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
客户端示例代码:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
2、使用 Express 3 框架
服务端示例代码:
var app = require('express')()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
server.listen(80);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
客户端示例代码:
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://localhost');
socket.on('news', function (data) {
console.log(data);
socket.emit('my other event', { my: 'data' });
});
</script>
支持的传输
为了给各个不同的浏览器提供实时连接,Socket.IO 选择在运行时会自动最有能力的运输模式,不影响 API 的使用。
- WebSocket
- Adobe Flash Socket
- AJAX 长轮询
- AJAX 多重流
- iframe
- JSONP 轮询
支持的浏览器
桌面端
- Internet Explorer 5.5+
- Safari 3+
- Google Chrome 4+
- Firefox 3+
- Opera 10.61+
移动端
- iPhone Safari
- iPad Safari
- Android WebKit
- WebOs WebKit
立即下载 官方主页
【基于 WebSocket 构建跨浏览器的实时应用】相关文章
2. HTML5-WebSocket实现对服务器CPU实时监控
6. HTML5的TCP和UDP Web Socket API草案定稿
7. DalekJS – 基于 JavaScript 实现跨浏览器的自动化测试
10. 一个跨浏览器的响应式设计辅助工具类库 - CSS Browser Selector +
本文来源:https://www.51html5.com/a694.html
﹝基于 WebSocket 构建跨浏览器的实时应用﹞相关内容
- 实现跨浏览器的HTML5占位符
- HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(下) ...
- HTML5 WebApp part4:使用 Web Workers 来加速您的移动 Web 应用程序(上) ...
- Adobe为Web设计人员推出开源文本编辑器Brackets
- Web前端开发工具,Adobe Brackets 1.1 正式版发布
- 海豚浏览器:手机浏览器的异类
- Mozilla宣布火狐Beta将支持Social API架构
- 使用ASP.NET MVC构建HTML5离线web应用程序
- 为LBS添彩 HTML5 Geolocation定位应用
- Air Hockey Plus