HTML5 Web socket和socket.io

程序员文章站 2022-09-11 15:57:30

　原理： client利用regular http请求webpage 请求的webpage 执行javascript脚本,open a connection to server. 有新...

　原理：

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>

<title>insert title here</title>

<style>

border-radius: 10px;

border: 2px solid pink;

width:800px;

}

</style>

</head>

<body>

//创建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');

});

上一篇： MySQL从删库到跑路_高级（二）——自定义函数

下一篇： easyui-dialog弹出层

HTML5 Web socket和socket.io

python实现探测socket和web服务示例

推荐WEB开发者最佳HTML5和CSS3代码生成器