最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。这段内容是我很早就想启动的，但是因为之前没有运行服务。所以文章没有写。今天经过一个下午，终于搞定了websocketwebSocket可以帮助浏览器和服务端完成双向通信的demo地址。在webSocket出现之前，我们需要使用一些特殊的手段从服务器接收数据，比如轮询、长连接等。构造函数varprotocol='wss'if(location.protocol=="http:")protocol='ws'ws=newWebSocket(protocol+"://ws.lilnong.top");WebSocket(url[,protocols])传入webScoket服务的URL以建立连接。属性和方法名类型描述url属性当前连接的绝对路径协议属性从属协议，对应构造函数第二个参数readyState属性当前链接状态bufferedAmount属性当前连接的绝对路径binaryType属性数据类型：blobclose()方法关闭当前链接send()方法向服务器发送数据未连接成功WebSocket.send()MethodWebSocket.send(String|ArrayBuffer|Blob|ArrayBufferView);varprotocol='wss'if(location.protocol=="http:")protocol='ws'wsTest=newWebSocket(protocol+"://ws.lilnong.top");wsTest.onclose=()=>console.log('onclose');wsTest.onerror=()=>console.log('onerror');wsTest.onmessage=()=>console.log('onmessage');wsTest.onopen=()=>console.log('onopen')varblob=newBlob(['lilnong.top','一批水'])filereader=newFileReader()filereader.readAsArrayBuffer(blob);filereader.onload=function(){wsTest.send(filereader.result)wsTest.send(newInt8Array(filereader.result))}wsTest.send(blob)wsTest.send('lilnong.topwaterAbatchof1')可以看到blob居然失败了发送。一般来说，我们还是发送String居多。WebSocket.close()方法WebSocket.close([code][,reason]);code表示错误代码。默认为1005。CloseEventreason是错误码的说明。回调函数函数名触发时机注意事项onclose回调函数主动关闭或被动关闭连接关闭后会触发onerror回调函数只有被动关闭才会触发onmessage回调函数e.data当接收到服务器发送的数据后返回的信息服务端onopen可以在连接成功后与回调函数进行交互。node的实现依赖ws=require('ws');这个websocket模块。我们可以将连接中的连接对象保存到一个全局数组中。这样我们就可以广播消息了。关闭时将连接对象移出数组。varws=require('ws');varsocketServer=ws.Server;varwss=newsocketServer({port:8090});//创建服务并监听8090端口//监听连接wss.on('connection',function(ws){//推送消息ws.send(JSON.stringify({type:'start',time:Date.now()}))//接收浏览器发送的消息ws.on('message',function(message){console.log(JSON.parse(message))})//监听连接断开ws.on('close',function(){})})htmlvarinitWs=functioninitWs(){varprotocol='wss'if(location.protocol=="http:")protocol='ws'ws=newWebSocket(protocol+"://ws.lilnong.top");ws.onopen=function(e){console.log('connectionsuccessful');}//接收消息处理ws.onmessage=function(e){console.log(e.data)}//监听连接关闭ws.onclose=function(e){setTimeout(v=>initWs(),2000);//自动重连console.log('connectionclosed');}}initWs();setInterval(v=>{ws.send(JSON.stringify({type:'ping'}));},10*1000);//保持心跳汇总socket需要保存心跳，一般是ping,傍逻辑。超时时间可以手动设置，所以心跳时间也可以选择。（我的是20s，所以心跳是10s。5m，公司以前做的）。如果插座断开，注意重新连接。因为都会掉到close里面，所以我们可以直接在close里面重连。在某些情况下，要注意重连频率和重连次数的策略。发送和接收只能是字符串，所以JSON.stringify()微信公众号：前端linong参考前端培训目录，前端培训计划，前端培训计划WebSockets
