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有更快的响应时间,得到更好的用户体验。