WebSocket协议是基于TCP的一种新的网络协议。WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通信的网络技术。依靠这种技术能够实现客户端和服务器端的长链接,双向实时通讯。php
WebSocket最大特色就是,服务器能够主动向客户端推送信息,客户端也能够主动向服务器发送信息,是真正的双向平等对话,属于服务器推送技术的一种。html
WebSocket普遍应用于社交聊天、直播、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等须要高实时的场景。java
在WebSocket API中,浏览器和服务器只须要作一个握手的动做,而后,浏览器和服务器之间就造成了一条快速通道。二者之间就直接能够数据互相传送。node
浏览器经过 JavaScript 向服务器发出创建 WebSocket 链接的请求,链接创建之后,客户端和服务器端就能够经过 TCP 链接直接交换数据。python
当你获取 Web Socket 链接后,你能够经过 send() 方法来向服务器发送数据,并经过 onmessage 事件来接收服务器返回的数据。web
本实例提供一个输入框用来输入消息,以及一个按钮用来向服务端发送消息。后端
<div> <div id="result"></div> <form class="form-inline" action=""> <div class="form-group"> <input type="text" class="form-control" id="m" autocomplete="off" placeholder="请输入您的昵称"> </div> <button type="submit" class="btn btn-info">发送</button> </form> </div> <script> if ("WebSocket" in window) { var ws = new WebSocket("ws://192.168.1.90:8088"); var result = document.querySelector('#result'); ws.onopen = function() { result.innerHTML = '已链接上!'; console.log('已链接上!'); } document.querySelector('form').onsubmit = function(e) { var msg = document.querySelector('#m').value; ws.send(msg); return false; } ws.onmessage = function(e) { console.log(e.data); result.innerHTML = e.data; } ws.onclose = function() { console.log('链接已关闭!'); } } else { alert('您的浏览器不支持 WebSocket!'); } </script>
上述代码中,使用new WebSocket()便可建立 WebSocket 对象。浏览器
ws.onopen
事件,链接创建时触发。服务器
ws.onmessage
事件,客户端接收服务端数据时触发。websocket
ws.onclose
事件,链接关闭时触发。
ws.onclose
事件,通讯发生错误时触发。
ws.send()
方法,使用链接发送数据。
客户端代码,在浏览器中访问,便可和服务端(192.168.1.90)创建websocket链接,当输入信息后,点击发送按钮,客户端立马向服务端发送消息,并接收服务端发来的消息。
在执行客户端程序前,须要建立一个支持websocket的服务,也就是说须要服务端语言环境支持。目前主流的后端语言java,php,python,nodejs,.net等都有相关模块支持websocket。本例中,咱们使用nodejs来做为服务端环境,经过安装nodejs-websocket模块来支持websocket。
本例中,我用了一台虚拟机做为服务端,liunx环境,IP是192.168.1.90。
var ws = require("nodejs-websocket"); //引入websocket模块 console.log("开始创建链接...");//后台打印状态信息 var server = ws.createServer(function(connect) { //建立一个新链接 connect.on("text",function(msg){ //接收触发事件 console.log("收到的消息是:" + msg); //接收到新消息以后在后台打印出来 if (msg) { //若是消息不是空,将接收到的消息发送给客户端 connect.send('服务端已收到消息:' + msg + '服务端发来消息: Hello,' + msg); } }); }).listen(8088);
保存为index.js文件,而后运行:node index.js,这个时候服务端就跑起来了,nodejs在监听8088端口。用浏览器打开客户端,输入信息,点击发送试试吧。
当咱们输入“李旺”并发送后,服务端收到了内容为“李旺”的消息后,发送了相应的消息给客户端。效果如图:
固然,实际生产环境中,咱们可使用PM2来控制nodejs程序在后台运行,使用Nginx作反向代理,不用将服务器ip和端口暴露到外网,能够参考:《Nginx配置反向代理访问内部服务》。
若是你对nodejs还不懂,不要紧,咱们后面会推出nodejs的相关文章,敬请留意。还有对于websocket的应用,Helloweba会继续推出文章讲解websocket在聊天室、直播和消息推送方面的应用,为了之后的讲解作铺垫,但愿有兴趣的同窗在关注websocket的同时也关注下nodejs以及swoole等技术,固然最关键的是须要关注咱们Helloweba。
在线演示:https://www.helloweba.net/dem...
源码下载:https://www.helloweba.net/dow...