当前位置: 首页 > Web前端 > HTML5

使用HTML5WebSocket实现服务端与客户端的数据通信(附demo和源码)

时间:2023-04-05 19:08:47 HTML5

WebSocket协议是一种基于TCP的新型网络协议。WebSocket是HTML5开始提供的浏览器和服务器之间全双工通信的网络技术。依托该技术可以实现客户端与服务器端的长连接、双向实时通信。WebSocket最大的特点就是服务端可以主动向客户端推送信息,客户端也可以主动向服务端发送信息。是真正的双向平等对话,属于服务器推送技术的一种。WebSocket广泛应用于社交聊天、直播、弹幕、多人游戏、协同编辑、实时股票基金行情、体育直播、视频会议/聊天、基于位置的应用、在线教育、智能家居等高-实时场景。WebSocket的特点是基于TCP协议,在服务端实现起来比较容易。对HTTP协议有很好的兼容性,可以通过各种HTTP代理服务器。数据格式相对轻量级,性能开销小,通信高效。可以发送文本或二进制数据。没有同源限制,客户端可以与任何服务器通信。协议标识符是ws(如果加密则为wss),服务器地址是URL。可以实现真正的数据推送。本文通过实例讲解使用HTML5WebSocket实现服务端与客户端之间数据收发的过程。在客户端的WebSocketAPI中,浏览器和服务器只需要进行一次握手,浏览器和服务器之间就形成了一个快速通道。两者之间可以直接传输数据。浏览器通过JavaScript向服务器发送建立WebSocket连接的请求。连接建立后,客户端和服务端可以直接通过TCP连接进行数据交换。获取WebSocket连接后,可以使用send()方法向服务器发送数据,使用onmessage事件接收服务器返回的数据。此示例提供了一个用于输入消息的输入框,以及一个用于向服务器发送消息的按钮。

发送
在上面的代码中,使用newWebSocket()创建了WebSocket对象的ws.onopen事件,当连接建立时触发。ws.onmessage事件在客户端从服务器接收到数据时被触发。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。varws=require("nodejs-websocket");//引入websocket模块console.log("Startestablishingaconnection...");//后台打印状态信息varserver=ws.createServer(function(connect){//新建连接connect.on("text",function(msg){//接收触发事件console.log("Themessagereceivedis:"+msg);//接收到新消息后在后台打印出来if(msg){//If消息不为空,将接收到的消息发送给客户端connect.send('服务端收到消息:'+msg+'服务端发送消息:你好,'+msg);}});})。listen(8088);保存为index.js文件,然后运行:nodeindex.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...