随着Web技术的发展，使用场景和需求也越来越复杂。客户不再满足于获取状态的简单请求。实时通信越来越多地应用于各个领域。HTTP是客户端和服务器端最常用的通信技术，但是HTTP通信只能由客户端发起，不能及时获取服务器端的数据变化。您只能依靠定期轮询来获取最新状态。时效性无法保证，请求多了会增加服务器的负担。WebSocket技术应运而生。WebSocket的概念不同于HTTP半双工协议。WebSocket是一种基于TCP连接的全双工协议，支持客户端和服务器端的双向通信。WebSocket使得客户端和服务器之间的数据交换更加容易，允许服务器主动向客户端推送数据。在WebSocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就可以直接建立持久连接，进行双向数据传输。在WebSocketAPI中，浏览器和服务器只需要进行一次握手，浏览器和服务器之间就形成了一个快速通道。两者之间可以直接传输数据。实现WebSocket对象的原生实现，一共支持四种消息onopen、onmessage、onclose和onerror。建立连接你可以通过javascript快速建立一个WebSocket连接：varSocket=newWebSocket(url,[protocol]);上面代码中的第一个参数url指定了连接的URL。第二个参数协议是可选的，指定可接受的子协议。和HTTP协议以http://开头一样，WebSocket协议的URL以ws://开头，安全的WebSocket协议以wss://开头。当Browser和WebSocketServer连接成功后，会触发onopen消息。Socket.onopen=function(evt){};如果连接失败，发送或接收数据失败，或者处理数据有错误，浏览器会触发onerror消息。Socket.onerror=function(evt){};当Browser收到WebSocketServer发送的关闭连接的请求时，会触发onclose消息。Socket.onclose=function(evt){};发送和接收消息当Browser收到WebSocketServer发送的数据时，会触发onmessage消息，参数evt包含了服务器发送的数据。Socket.onmessage=function(evt){};send用于向服务器发送消息。Socket.send();socketWebSocket是随着HTML5提出来的，所以存在兼容性问题。这时，一个非常有用的库登场了——Socket.io。Socket.io封装了websocket并包含了其他的连接方法。您可以使用socket.io在任何浏览器中建立异步连接。Socket.io包括用于服务器和客户端的库。如果在浏览器中使用socket.iojs，则服务器端也必须适用。socket.io是一个基于Websocket的Client-Server实时通信库。socket.io的底层是基于engine.io库的。engine.io为socket.io提供了跨浏览器/跨设备双向通信的底层库。engine.io使用Websocket和XHR封装了一套socket协议。在低版本浏览器中，不支持Websocket，为了兼容，改用长轮询（polling）。API文档Socket.io允许你触发或响应自定义事件，除了connect、message、disconnect不能使用的事件名称外，你可以触发任何自定义事件名称。建立连接constsocket=io("ws://0.0.0.0:port");//port是自己定义的端口号letio=require("socket.io")(http);io.on("connection",function(socket){})消息收发1.发送数据socket.emit(customsentfield,data);2.接收数据socket.on(customsendfield,function(data){console.log(data);})Disconnect1.断开所有连接letio=require("socket.io")(http);io.close();2.客户端断开与服务器的连接//Clientsocket.emit("close",{});//服务器socket.on("close",data=>{socket.disconnect(true);});room和namespace有时会有以下使用websocket的场景：1.服务端发送的消息是分类的，不同的客户端需要接收不同的分类；2、服务端不需要向所有客户端发送消息，只需要向特定的组发送消息；对于这种使用场景，socket中非常实用的namespace和room就派上用场了。放一张图看看namespace和room的关系：是后命名空间`});});io.of("/get").on("connection",function(socket){socket.emit("newmessage",{mess:`Thisisthenamespaceofget`});});客户端//index.jsconstsocket=io("ws://0.0.0.0:****/post");socket.on("newmessage",function(data){console.log('index',data);}//message.jsconstsocket=io("ws://0.0.0.0:****/get");socket.on("newmessage",function(data){console.log('message',data);}roomclient//可用于client进入房间;socket.join('roomone');//用于离开房间;socket.leave('roomone');serverio.sockets.on('connection',function(socket){//提交者将被排除（即不会收到消息)socket.broadcast.to('roomone').emit('newmessages',data);//向所有用户发送消息io.sockets.to(data).emit("recivemessage","你好，房间里的用户");}使用socket.io实现一个实时接收信息的例子终于到了应用、服务阶段服务器接口是用node.js模拟的。下面的例子都是在本地服务器实现的。我们先来看看服务器。我们先启动一个服务，安装express和socket.io安装依赖npminstall--Devexpressnpminstall--Devsocket.iobuildnodeserverletapp=require("express")();让http=require("http").createServer(handler);让io=require("socket.io")(http);让fs=require("fs");http.listen(端口);//port:输入需要的端口号functionhandler(req,res){fs.readFile(__dirname+"/index.html",function(err,data){if(err){res.writeHead(500);returnres.end("加载index.html时出错");}res.writeHead(200);res.end(data);});}io.on("connection",function(socket){console.log('ConnectionSuccess');//连接成功后发送消息socket.emit("newmessage",{mess:`Initialmessage`});});客户端核心代码——index.html（向服务器发送数据）
