HTML5 Web socket和socket.io

时间 2019-11-12

标签 html5 html web socket socket.io 栏目 HTML5 繁體版

原文原文链接

what is websockets

Two-way communication over ont TCP socket, a type of PUSH technologyjavascript

　　HTML5的新特性，用于双向推送消息（例如网页聊天，手机推送消息等）html

　　原理：java

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 servernode

客户端

　　说明：git

　　readyState：github

CONNECTING (0)：表示还没创建链接；
OPEN (1)：已经创建链接，能够进行通信；
CLOSING (2)：经过关闭握手，正在关闭链接；
CLOSED (3)：链接已经关闭或没法打开；web

　　url： WebSocket 服务器的网络地址，协议一般是”ws”或“wss(加密通讯)”,npm

　　事件：ruby

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安装见 http://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>
div{
    border-radius: 10px;
    border: 2px solid pink;
    width:800px;
}
</style>
</head>
<body>
<h1></h1>
<div id="result"></div>
<script src="http://localhost:8000/socket.io/socket.io.js"></script>
<script>
//建立Socket.IO实例，创建链接

var socket = io.connect('http://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');
});

结果：

客户端：

服务器端：