HTML5 Web socket和socket.io
client利用regular http请求webpage
请求的webpage 执行javascript脚本,open a connection to server.
有新的信息时服务器和客户端可以相互发送信息（real-time traffic from the server to the client and from the client to the server
html5 websockets
客户端
说明：
readystate：
connecting (0)：表示还没建立连接；
open (1)： 已经建立连接，可以进行通讯；
closing (2)：通过关闭握手，正在关闭连接；
closed (3)：连接已经关闭或无法打开；
url： websocket 服务器的网络地址，协议通常是”ws”或“wss(通信)”,
事件：
send：向服务器端发送数据
close 方法就是关闭连接；
onopen连接建立，即握手成功触发的事件；
onmessage收到服务器消息时触发的事件；
onerror异常触发的事件；
使用例子：
复制代码
// 创建一个socket实例
var socket = new websocket('ws://localhost:8080');
// 打开socket
socket.onopen = function(event) {
// 发送一个初始化消息
socket.send('i am the client and i\'m listening!');
// 监听消息
socket.onmessage = function(event) {
console.log('client received a message',event);
};
// 监听socket的关闭
socket.onclose = function(event) {
console.log('client notified socket has closed',event);
};
// 关闭socket....
//socket.close()
};
复制代码
服务器端
jwebsocket (java)
web-socket-ruby (ruby)
socket io-node (node.js)
下面以socket.io说明，环境说明：（node.js安装见 https://www.cnblogs.com/wishyouhappy/p/3647037.html）
1. 安装socket.io
npm install -g socket.io
2.使用require引入http和socket.io
var http = require("http");
var io= require('socket.io');
3.创建server
var server = http.createserver(function(request, response){
response.writehead(200,{"content-type":"text/html"});
response.write("websocket start~~~~~~~~~~~~");
response.end("");
}).listen(8000);
4.监听
var socket= io.listen(server);
5.例子：
复制代码
var http = require("http");
var io= require('socket.io');
var server = http.createserver(function(request, response){
response.writehead(200,{"content-type":"text/html"});
response.write("websocket start~~~~~~~~~~~~");
response.end("");
}).listen(8000);
var socket= io.listen(server);
// 添加一个连接监听器
socket.on('connection', function(client){
client.on('message',function(event){
console.log('received message from client!',event);
});
client.on('disconnect',function(){
clearinterval(interval);
console.log('server has disconnected');
});
});
复制代码
数据发送两种方式send和emit
使用send和emit都可以发送数据，但是emit可以自定义事件，如下：
emit：
复制代码
//服务器
socket.on('connection', function(client){
client.on('message',function(event){
client.emit('emitmessage', { hello: 'messgge received, wish you happy'+new date().tostring() });
});
});
//客户端
socket.on('emitmessage',function(data) {
document.getelementbyid("result").innerhtml+=data.hello + "<br />";
});
复制代码
send：
复制代码
//服务器
socket.on('connection', function(client){
client.send('hello, i am the server');
});
//客户端
socket.on('message',function(data) {
document.getelementbyid("result").innerhtml+=data + "<br />";
});
复制代码
实例：（socket.io）
客户端：
复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insert title here</title>
<style>
p{
border-radius: 10px;
border: 2px solid pink;
width:800px;
}
</style>
</head>
<body>
<h1></h1>
<p id="result"></p>
<script src="https://localhost:8000/socket.io/socket.io.js"></script>
<script>
//创建socket.io实例，建立连接
var socket = io.connect('https://localhost:8000');
// 添加一个连接监听器
socket.on('connect',function() {
console.log('client has connected to the server!');
});
// 添加一个连接监听器
socket.on('message',function(data) {
document.getelementbyid("result").innerhtml+=data + "<br />";
});
socket.on('emitmessage',function(data) {
document.getelementbyid("result").innerhtml+=data.hello + "<br />";
});
// 添加一个关闭连接的监听器
socket.on('disconnect',function() {
console.log('the client has disconnected!');
});
// 通过socket发送一条消息到服务器
function sendmessagetoserver(message) {
socket.send(message);
}
var date = new date();
var ms="time: "+date.tostring()+"today is a nice day, wish you happy";
setinterval("sendmessagetoserver(ms)",1000);
</script>
</body>
</html>
复制代码
服务器：
复制代码
var http = require("http");
var io= require('socket.io');
var server = http.createserver(function(request, response){
response.writehead(200,{"content-type":"text/html"});
response.write("websocket start~~~~~~~~~~~~");
response.end("");
}).listen(8000);
var socket= io.listen(server);
// 添加一个连接监听器
socket.on('connection', function(client){
client.on('message',function(event){
console.log('received message from client!',event);
client.emit('emitmessage', { hello: 'messgge received, wish you happy'+new date().tostring() });
});
client.on('disconnect',function(){
// clearinterval(interval);
console.log('server has disconnected');
});
client.send('hello, i am the server');
});
推荐阅读
-
推荐WEB开发者最佳HTML5和CSS3代码生成器
-
解析HTML5的存储功能和web SQL的相关操作方法
-
HTML5 CSS3新的WEB标准和浏览器支持
-
HTML5 Web存储方式的localStorage和sessionStorage进行数据本地存储案例应用
-
使用Node.js和Socket.IO扩展Django的实时处理功能
-
HTML5 Web缓存和运用程序缓存(cookie,session)
-
python实现探测socket和web服务示例
-
推荐WEB开发者最佳HTML5和CSS3代码生成器
-
HTML5 Web socket和socket.io
-
使用socket.io制做简易WEB聊天室