1. <!DOCTYPE html>
  2. <meta charset="utf-8" />
  3. <title>WebSocket Test</title>
  4. <script language="javascript"type="text/javascript">
  5.     var wsUri ="ws://echo.websocket.org/";
  6.     var output;  
  7.  
  8.     function init() {
  9.         output = document.getElementById("output");
  10.         testWebSocket();
  11.     }  
  12.  
  13.     function testWebSocket() {
  14.         websocket = new WebSocket(wsUri);
  15.         websocket.onopen = function(evt) {
  16.             onOpen(evt)
  17.         };
  18.         websocket.onclose = function(evt) {
  19.             onClose(evt)
  20.         };
  21.         websocket.onmessage = function(evt) {
  22.             onMessage(evt)
  23.         };
  24.         websocket.onerror = function(evt) {
  25.             onError(evt)
  26.         };
  27.     }  
  28.  
  29.     function onOpen(evt) {
  30.         writeToScreen("CONNECTED");
  31.         doSend("WebSocket rocks");
  32.     }  
  33.  
  34.     function onClose(evt) {
  35.         writeToScreen("DISCONNECTED");
  36.     }  
  37.  
  38.     function onMessage(evt) {
  39.         writeToScreen('<span style="color: blue;">RESPONSE: '+ evt.data+'</span>');
  40.         websocket.close();
  41.     }  
  42.  
  43.     function onError(evt) {
  44.         writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);
  45.     }  
  46.  
  47.     function doSend(message) {
  48.         writeToScreen("SENT: " + message);
  49.         websocket.send(message);
  50.     }  
  51.  
  52.     function writeToScreen(message) {
  53.         var pre = document.createElement("p");
  54.         pre.style.wordWrap = "break-word";
  55.         pre.innerHTML = message;
  56.         output.appendChild(pre);
  57.     }  
  58.  
  59.     window.addEventListener("load", init, false);
  60. </script>
  61. <h2>WebSocket Test</h2>
  62. <div id="output"></div>
  63. </html>

主要代码解读：

申请一个WebSocket对象，参数是需要连接的服务器端的地址，同http协议使用http://开头一样，WebSocket协议的URL使用ws://开头，另外安全的WebSocket协议使用wss://开头。。

  1. var wsUri ="ws://echo.websocket.org/";
  2. websocket = new WebSocket(wsUri);

WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror，

我们可以看出所有的操作都是采用消息的方式触发的，这样就不会阻塞UI，使得UI有更快的响应时间，得到更好的用户体验。

当Browser和WebSocketServer连接成功后，会触发onopen消息;

  1. websocket.onopen = function(evt) {
  2. };

如果连接失败，发送、接收数据失败或者处理数据出现错误，browser会触发onerror消息;

  1. websocket.onerror = function(evt) {
  2. };

当Browser接收到WebSocketServer发送过来的数据时，就会触发onmessage消息，参数evt中包含server传输过来的数据;

  1. websocket.onmessage = function(evt) {
  2. };

当Browser接收到WebSocketServer端发送的关闭连接请求时，就会触发onclose消息。

  1. websocket.onclose = function(evt) {
  2. };

WebSocket与TCP、HTTP的关系WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议，Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的。

WebSocket和Http协议一样都属于应用层的协议，那么他们之间有没有什么关系呢?答案是肯定的，WebSocket在建立握手连接时，数据是通过http协议传输的，但是在建立连接之后，真正的数据传输阶段是不需要http协议参与的。

前端 websocket用法的更多相关文章

  1. WebIM技术---编写前端WebSocket组件

    过去我们想要实现一个实时Web应用通常会考虑采用ajax轮循或者是long polling技术,但是因为频繁的建立http连接会带来多余的请求以及消息精准性的问题,让我们在实现实时Web应用时头疼不已 ...

  2. 前端-----margin用法(盒子模型里补充)

    margin塌陷问题 当时说到了盒模型,盒模型包含着margin,为什么要在这里说margin呢?因为元素和元素在垂直方向上margin里面有坑. 我们来看一个例子: html结构: <div ...

  3. 小程序websocket用法

    // socket已经连接成功 var socketOpen = false // socket已经调用关闭function var socketClose = false // socket发送的消 ...

  4. 前端webSocket和后台php

    HTTP协议的特性:属于"请求-响应"模型,只有客户端发起了请求消息,服务器才能给出响应消息,没有请求,就没有响应:一个请求消息,服务器只能返回一个响应消息.有些特殊应用场景中,如 ...

  5. Golang websocket推送

    Golang websocket推送 在工作用主要使用的是Java,也做过IM(后端用的netty websocket).最近想通过Golang重写下,于是通过websocket撸了一个聊天室. 项目 ...

  6. jdk6使用WebSocket

    pom.xml <dependency> <groupId>org.java-websocket</groupId> <artifactId>Java- ...

  7. WebSocket最简易理解，term.js插件的使用

    介绍WebSocket WebSocket我想大家并不陌生,无论你的的工作中是否用到了它,都或多或少听说过,它是h5中新增的,在某些方面可以很好的替代我们一直沿用的ajax技术,甚至更加的出色.但是它 ...

  8. 【Java分享客栈】SpringBoot整合WebSocket+Stomp搭建群聊项目

    前言 前两周经常有大学生小伙伴私信给我,问我可否有偿提供毕设帮助,我说暂时没有这个打算,因为工作实在太忙,现阶段无法投入到这样的领域内,其中有两个小伙伴又问到我websocket该怎么使用,想给自己的 ...

  9. 初探和实现websocket心跳重连

    心跳重连缘由 在使用websocket过程中,可能会出现网络断开的情况,比如信号不好,或者网络临时性关闭,这时候websocket的连接已经断开, 而浏览器不会执行websocket 的 onclos ...

随机推荐

  1. 使用jquery刷新当前页面、刷新父级页面

    如何使用jquery刷新当前页面 下面介绍全页面刷新方法:有时候可能会用到 window.location.reload(); //刷新当前页面.(我用的这个一个,非常好) parent.locati ...

  2. ABAP-串口通信-道闸设备

    最近SAP系统需要与道闸设备集成,通过串口通讯模式控制道闸栏杆升降,在此将开发过程中的思路及问题点做个备注. 一.相关设备 道闸设备型号:富士智能FJC-D618 串口模块:康耐德 C2000-A1- ...

  3. JS中Float类型加减乘除

    //浮点数加法运算 function FloatAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1]. ...

  4. GCD 常用API 总结

    dispatch_sync:同步操作,会阻塞当前线程 dispatch_async:普通的异步操作,也就是在指定的队列中添加一个block操作,不会阻塞当前线程 dispatch_group_asyn ...

  5. lientDataset的Delta与XML相互转换

    一个ClientDataset的Delta与XML相互转换的文章:大家都知道TClientDataSet的Delta属性保存数据集的变化,但是Delta是OleVariant类型的属性,这样如果用De ...

  6. js 选项卡制作

    知识回顾,制作JS选项卡,仅供参考 html代码: <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. 3.有关于Python列表简述

    一..title() [让所选择的列表元素的第一个字母大写] test = ['no1','No2','No3','No4'] book = "This My " + test[0 ...

  8. angular的启动原理

    当你用浏览器去访问index.html的时候,浏览器依次做了如下一些事情: 加载html,然后解析成DOM: 加载angular.js脚本:加载完成后自执行,生成全局angular对象,监听DOMCo ...

  9. webpack打包avalon＋mmRouter

    这是上一篇<webpack打包avalon+oniui+jquery>的姐妹篇,avalon 的高级应用篇.大家要知道,现在最流行的网页架构就是SPA,SPA能提高用户体验.用户许多数据都 ...

  10. C++多态，虚函数，虚函数表，纯虚函数

    1.多态性   指相同对象收到不同消息或不同对象收到相同消息时产生不同的实现动作. C++支持两种多态性:编译时多态性,运行时多态性.    a.编译时多态性:通过重载函数实现 ,模板(2次编译)  ...