实现远程实时通信 Html5:Canvas+WebSocket

转载 2015年11月20日 10:50:51

实时通信

随着网络的迅速发展,实时通信的应用场景越来越多,比如聊天室、股票的幅度、火车票数量、最新微博列表、实时投票、即时消息、地理位置等等,虽然我们已经在使用这些应用,但是这些应用场景多数都是“伪实时”,我们并不是在数据发生变化时,第一时间拿到的。

传统“伪实时”和“实时”实现方案:

1、Ajax轮询 : 页面打开的后,通过一个定时器每间隔一段时间后使用Ajax往服务器端发送请求,试图拿到最新的数据,服务器进行返回,并且关闭连接;(实则就是客户端主动去找服务器端要最新数据,客户端不管服务器端是否真的有数据,都会去找服务器端要);

2、Ajax长轮询:页面打开的后,客户端向服务器端发出一个请求并打开一个连接,服务器端接收到这个请求后,并不是马上响应,而是等最新数据时才进行响应,服务器端响应完毕后,客户端再次发送一个请求;(实则就是客户端主动找服务器端要最新数据,服务器端如果有最新数据就进行响应,没有最新数据就一直等到有新数据才进行响应);

3、Flash Socket,Flash 内部有自己的Socket实现完成数据交换,再通过JavaScript 调用,从而达到实时传输目的。此方式比轮询更高效,多数的企业客服都是采用这种方案。不过必须保证浏览器安装了flash插件,不过手机浏览器几乎都不支持flash;

什么是WebSocket?

WebSocket是HTML5一种新的协议。它实现了客户端与服务器相互通信的办法。传统客户端与服务器端只能是客户端主动找服务器端拿数据,而服务器的无法主动把数据给客户端;而WebSocket则让服务器端把数据推给客户端;我们来看看一个现实生活中的例子:老板发的了一条消息:“全体人员明天加班”,传统方式:每一个员工需要主动的去公告栏获取这条信息,如果某一个员工没有去公告栏,那么就只有等着老板批斗,而WebSocket方式:每一个员工在上班的时候,一条明天加班的噩耗就来了,躲都躲不了;

结合交互图:

图 1. 传统 HTTP 请求响应客户端服务器交互图

这里写图片描述

图 2. WebSocket 请求响应客户端服务器交互图

这里写图片描述

对比传统HTTP与WebSocket 可以看出,传统方式客户端与服务器端交互都需要进行open/close,而WebSocket只要打开后就可以不端的进行交互,适合做实时通信;

NodeJS+Socket.io实时通信实战

NodeJS:服务器端运行JS的平台;

Socket.io: socket.io 是 websocket 公认标准框架;

使用NodeJS+Socket.io我们只需要执行少许的命令和代码就可以轻松的体验WebScoket强大功能;GO;

(注意:如果不node环境不知道如何搭建,可以查看我写NodeJs入门文章)

第一步新建NodeJs Web环境:

这里写图片描述

命令切换到项目目录

这里写图片描述

第二步添加socekt.io包:

这里写图片描述

第三步项目依赖包:

这里写图片描述

基础的Web环境已经搭建完毕了,你可以启动Web项目尝试访问;

这里写图片描述

浏览器中输入:http://localhost:3000; 检查是否有网页;

第四步让websocket处理请求

找到你项目目录下面的F:\node-websocket\bin\www文件,使用文本文件打开;

默认为:

这里写图片描述

修改为:

这里写图片描述

第五步修改页面添加消息列表和消息发送框:

页面位置:F:\nodeproject\socket-node\views\index.ejs

这里写图片描述

重启服务器,打开浏览器新建两个窗口http://localhost/ ,发送消息尝试一下;

这里写图片描述

基于Java的 websocket聊天,消息推送,桌面共享,html5,css3

  • 2014年11月12日 10:48
  • 805KB
  • 下载

使用 WebSockets 进行 HTML5 视频直播

使用 WebSockets 进行 HTML5 视频直播
  • andyliulin
  • andyliulin
  • 2015年05月14日 10:15
  • 18767

webSocket应用:同步html5画布

本教程演示了如何创建简单 Web 应用程序,以在连接到单个服务器应用程序的客户端浏览器之间实现协作。当用户在客户端浏览器中的画布上绘制图形元素时,该元素将显示在所有已连接客户端的画布上。如何工作?当浏...
  • liang0000zai
  • liang0000zai
  • 2015年12月10日 15:19
  • 1699

WebSocket Client连接远程WebSocket Server

在这篇文章中,简单介绍了WebSocket的使用,客户端可以使用了JavaScript向服务发送请求,服务端也可以通过SimpMessagingTemplate 主动向客户端推送消息,实现服务器端与客...
  • kangkanglou
  • kangkanglou
  • 2017年10月25日 20:30
  • 519

通过(Node Js||.Net)基于HTML5的WebSocket实现实时视频文字传输(上)

HTML5 拥有许多引人注目的新特性,如 Canvas、本地存储、多媒体编程接口、WebSocket 等等。虽然现在大家把它捧的很火的样子,但是个人认为它还需要其他平台的支持才能真正的"火起来"。 ...
  • luqin1988
  • luqin1988
  • 2012年07月16日 09:27
  • 8318

基于HTML5 WebSocket的Web实时通信机制的研究与实现

随着互联网技术的高速发展,人们对Web应用的实时性要求越来越高,传统的Web实时通信方案已经无法满足一些现实应用的需求。在长期的Web应用过程中该传统方案逐渐露出资源浪费、实时性不高等问题,这些问题的...
  • carzyer
  • carzyer
  • 2016年06月03日 13:39
  • 2792

html5之应用,纯web rdp 远程桌面连接

10.23补充 最近在网上找到了一个开源的web rdp引擎,可以参考一下,通过界面介绍,感觉好不错。 http://guac-dev.org/     最近一直在琢磨如何方便部署和开发堡垒机,li...
  • zhulinu
  • zhulinu
  • 2012年03月12日 22:23
  • 26434

socket + vue + canvas实践,你画我猜(一)

正式项目未开始,先先自己练手,做一个你画我猜小游戏,先上一个不完善的dome在线地址 http://www.5rgame.com 1.node; 安装socket,启动服务var io = requ...
  • huaxiongbiao
  • huaxiongbiao
  • 2017年04月14日 16:44
  • 3187

Java WebSocket使用教程 - 带完整实例

什么是WebSocket?看过html5的同学都知道,WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。HTML5定义了We...
  • yaomingyang
  • yaomingyang
  • 2018年01月08日 10:06
  • 826

使用websocket做视频直播

最近在做的一个小项目需要用到相关技术,找到这篇文章貌似不错,于是就翻译转载上来了。 Recently I’m interesting in these technologies and I’m wo...
  • TiaoZhanJi_Xian
  • TiaoZhanJi_Xian
  • 2016年01月05日 14:47
  • 8821
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:实现远程实时通信 Html5:Canvas+WebSocket
举报原因:
原因补充:

(最多只允许输入30个字)