socket通信和websocket通信协议

socket通信

网络上的两个程序通过一个双向的通信链接实现数据的交换，这个链接的一端称为一个socket
socket通信流程图

通信流程图

服务器端通过创建一个socket的通信链接，然后绑定socket和端口号并监听，就可以接收来自客户端的连接请求了，前提是客户端也有socket并且连接到了该服务器所在设备的端口。客户端通过send想socket中写入信息，服务器就可以读到。如果服务器关了，客户端程序是不能够正常登陆的。

nodejs里面提供的net模块可以实现socket通信，因为它提供了一些用于底层的网络通信的小工具，包含了创建服务器/客户端的方法。

//server.js
//服务器文件
var net = require("net");
var server = new net.createServer;
var clientObiect = {};
//流水账号--区分服务器上的客户端
var i = 0;
//连接
server.on("connection",(client)=>{
	client.name = ++i;
	clientObiect[client.name ]=client;
	
	client.on("data",(data)=>{
		console.log("客户端发来:"+data);
		huifu(client,data);
	})
	
})
function huifu(client,message){
//	client.write("服务器已收到")	

	for(let i in clientObiect){
		clientObiect[i].write(client.name+"说："+message);		
	}
	
	
}

server.listen(3000)

//client.js
//客户端
var net = require("net");
var readline = require("readline");
var socket = new net.Socket;
var port = 3000;
var hostname ="localhost";
//var hostname ="10.8.162.15";
//连接服务器
socket.connect(port,hostname,()=>{
	socket.write("超级无敌美少女已上线")	
})
//接收服务器数据
socket.on("data",(data)=>{
//	console.log("服务端发来："+data)	
	console.log(""+data)
	say()
})

var r1 = new readline.createInterface({	
	input:process.stdin,
	output:process.stdout
})

function say(){
	r1.question("请输入：",(str)=>{
		socket.write(str)
	})	
}

有了客户端和服务端，就可以通过node server 启动服务器，通过node client启动客户端（打开多个窗口，多个客户端），上面可以实现多个客户端程序之间的一个通信。改变端口号可以连接上其他计算机的服务器提供的端口，和其他客户端进行聊天。

websocket通信

WebSocket是html5新增加的一种双工通信协议，目前流行的浏览器都支持这个协议

它和socket不同的是，他属于前端的一个通信，和nodejs没啥关系。而socket是一个后端的通信协议，可以用来测试然后应用在客户端上。

首先，npm init 创建一个依赖文件，再安装ws的一个依赖npm i ws -D，之后就可以去创建websocket里面的服务器和客户端了。

服务器：

//wsserver.js
//服务器文件
var wsserver = require("ws").Server;
var wss = new wsserver({port:3000});
var clientObiect = {};
//流水账号---用来区分服务器上的客户端
var i = 0;
//连接
wss.on("connection",(client)=>{
	client.name = ++i;
	clientObiect[client.name ]=client;	
	client.on("message",(data)=>{
		console.log("客户端发来:"+data);
		huifu(client,data);
	})
})

function huifu(client,message){

	for(let i in clientObiect){
		clientObiect[i].send(client.name+"说："+message);		
	}
	
}

客户端：

//demo.html
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#con{
				width: 500px;
				height: 400px;
				border: 1px solid red;
			}
			
		</style>
	</head>
	<body>
		<h1>h5通信</h1>
		<div id="con"></div>
		
		<input type="text" id="ipt"/>
		<button id="btn">发送</button>
	</body>
	<script type="text/javascript">
//申请一个WebSocket对象，参数是需要连接服务器的地址，遵循的是ws协议
		var client = new WebSocket('ws://localhost:3000');
		client.onopen=function(){};
		
		client.onmessage =function(a){
			document.getElementById("con").innerHTML+= "<p>"+a.data+"</p>"
		}
		
		document.getElementById("btn").onclick=function(){
			client.send(document.getElementById("ipt").value);
			document.getElementById("ipt").value = "";
		}
		
	</script>
</html>

WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror。

当Browser和WebSocketServer连接成功后，会触发onopen消息；
如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息；
当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据；
当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。

我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

socket通信和websocket通信协议

猜你喜欢