攀枝花 网站建设,asp,惠州免费建站模板,大数据营销的典型案例一、WebSocket出现的原因
1、Http协议发布REST API 的不足#xff1a; 每次请求响应完成之后#xff0c;服务器与客户端之间的连接就断开了#xff0c;如果客户端想要继续获取服务器的消息#xff0c;必须再次向服务器发起请
求。这显然无法适应对实时通信有高要求的场景…一、WebSocket出现的原因
1、Http协议发布REST API 的不足 每次请求响应完成之后服务器与客户端之间的连接就断开了如果客户端想要继续获取服务器的消息必须再次向服务器发起请
求。这显然无法适应对实时通信有高要求的场景。
2、改善http的不足Web通信领域出现了一些其他的解决方案如轮询、长轮询、服务器推送事件、WebSocket 1轮询就是重复发送新的请求到服务器。如果服务器没有新的数据就发送适当的指示并关闭连接。然后客户端等待一段时间
比如间隔一秒再发送另一个请求。这种实现方式相对比较简单无须做过多的更改。但缺点是轮询的间隔过长会导致用户不能及
时接收到更新的数据轮询时间过短会导致查询请求过多增加服务器端的负担。
2长轮询客户端发送一个请求到服务器如果服务器端没有新的数据就保持这个连接直到有数据。一旦服务器端有了数据
消息给客户端它就使用这个连接发送数据给客户端接着连接关闭
3服务器推送事件Server-Sent EventsSSE,SSE通常重用一个连接处理多个消息事件。SSE还定义了一个专门的媒体类
型用于描述一个从服务端发送到客户端的简单格式。
4WebSocket提供了一个真正的全双工连接。发起者是一个客户端发送一个带特殊HTTP头的请求到服务端通知服务器。
该方案的优点是属于html5标准已经被大多数浏览器支持而且是真正的全双工性能比较好其缺点是实现起来比较复杂需要对ws
协议专门处理。
二、Node使用ws创建WebSocket服务器
1、Node.js原生API没有提供对WebSocket的支持需要安装第三方包才能使用WebSocket功能
2、ws模块是一个用于支持WebSocket客户端和服务器的框架。它易于使用功能强大且不依赖于其他环境
3、安装wsnpm install ws
4、创建WebSocket服务器 //创建一个WebSocket服务器在8080端口启动const WebSocket require(ws)const server new WebSocket.Server({port:8080})5、WebSocket.Server(options[callback])方法中options对象所支持的参数
1host绑定服务器的主机名
2port绑定服务器的端口号
3backlog挂起连接队列的最大长度
4server预先创建的node.js http/s服务器
5verifyClient可用于验证传入连接的函数
6handleProtocols可用于处理WebSocket子协议的函数
7path仅接受与此路径匹配的连接
8noServer不启用服务器模式
9clientTracking指定是否跟踪客户端
10perMessageDeflate启用/禁用消息压缩
11maxPayload允许的最大消息大小以字节为单位
三、监听连接ws通过connection事件来监听连接
server.on(connection,function connection(ws,req){const ip req.socket.remoteAddressconst port req.socket.remotePortconst clientName ip portconsole.log(%s is connected ,clientName)})//只要有WebSocket连接到该服务器就会触发connection事件req对象可以用来获取客户端的信息如ip、端口号//获取所有已连接的客户端信息则可以使用server.clients数据集四、发送数据ws通过send()方法来发送数据 /* send(data [,options][,callback])data发送的数据options对象(1)compress指定数据是否需要压缩。默认为true(2)binary指定数据是否通过二进制传送。默认是自动检测(3)mask指定是否应遮罩数据。(4)fin指定数据是否为消息的最后一个片段。默认为true*/server.on(connection,function connection(ws,req){const ip req.socket.remoteAddressconst port req.socket.remotePortconst clientName ip portconsole.log(%s is connected ,clientName)ws.send(Welcome clientName)})五、接收数据ws通过message事件来接收数据。当客户端有消息发送给服务器时服务器就能够触发该消息
server.on(connection,function connection(ws,req){const ip req.socket.remoteAddressconst port req.socket.remotePortconst clientName ip portconsole.log(%s is connected ,clientName)ws.send(Welcome clientName)ws.on(message,function incoming(message){console.log(received: %s from %s,message,clientName)server.clients.forEach(function each(client){if(client.readyState WebSocket.OPEN){client.send(clientName - message)}})})})六、准备的状态ws中WebSocket类具有以下4中准备状态
1、CONNCETION值为0表示连接还没有打开
2、OPEN值为1表示连接已经打开可以通信了
3、CLOSING值为2表示连接正在关闭
4、CLOSED值为2表示连接已经关闭
server.clients.forEach(function each(client){if(client.readyState WebSocket.OPEN){client.send(clientName - message)}})七、关闭WebSocket服务器通过监听close事件关闭服务器 server.on(close,function close(){console.log(disconnected)})案例 1、服务器端server.js
const WebSocket require(ws)const server new WebSocket.Server({port:8080})server.on(open,function open(){console.log(connected)})server.on(close,function close(){console.log(disconnected)})server.on(connection,function connection(ws,req){const ip req.socket.remoteAddressconst port req.socket.remotePortconst clientName ip portconsole.log(%s is connected ,clientName)ws.send(Welcome clientName)ws.on(message,function incoming(message){console.log(received: %s from %s,message,clientName)server.clients.forEach(function each(client){if(client.readyState WebSocket.OPEN){client.send(clientName - message)}})})})2、客户端
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodyscriptvar socketif (!window.WebSocket) {window.WebSocket window.MozWebSocket}if(window.WebSocket){socket new WebSocket(ws://localhost:8080/ws)socket.onmessage function(event){var ta document.getElementById(responseTest)ta.value ta.value \n event.data}socket.onopen function(event) {var ta document.getElementById(responseTest)ta.value 连接开启!}socket.onclose function(event) {var ta document.getElementById(responseTest)ta.value 连接关闭!}}else{alert(你的浏览器不支持WebSocket)}function send(message){if(!window.WebSocket){return}if(socket.readyState WebSocket.OPEN){socket.send(message)}else{alert(连接没有开启)}}/scriptform onsubmitreturn falseh3WebSocket 聊天室/h3textarea idresponseTest stylewidth: 500px;height: 300px;/textareabrinput typetext namemessage stylewidth: 300px; valueWelcome to woniuxy.cominput typebutton value发送消息 onclicksend(this.form.message.value)input typebutton value清空聊天记录 onclickjavascript:document.getElementById(responseTest).value/form/body/html
