<!DOCTYPE html>

<meta charset="utf-8" />

<title>WebSocket Test</title>

<script language="javascript"type="text/javascript">

    var wsUri ="ws://echo.websocket.org/";

    var output;  

    function init() {

        output = document.getElementById("output");

        testWebSocket();

    }  

    function testWebSocket() {

        websocket = new WebSocket(wsUri);

        websocket.onopen = function(evt) {

            onOpen(evt)

        };

        websocket.onclose = function(evt) {

            onClose(evt)

        };

        websocket.onmessage = function(evt) {

            onMessage(evt)

        };

        websocket.onerror = function(evt) {

            onError(evt)

        };

    }  

    function onOpen(evt) {

        writeToScreen("CONNECTED");

        doSend("WebSocket rocks");

    }  

    function onClose(evt) {

        writeToScreen("DISCONNECTED");

    }  

    function onMessage(evt) {

        writeToScreen('<span style="color: blue;">RESPONSE: '+ evt.data+'</span>');

        websocket.close();

    }  

    function onError(evt) {

        writeToScreen('<span style="color: red;">ERROR:</span> '+ evt.data);

    }  

    function doSend(message) {

        writeToScreen("SENT: " + message);

        websocket.send(message);

    }  

    function writeToScreen(message) {

        var pre = document.createElement("p");

        pre.style.wordWrap = "break-word";

        pre.innerHTML = message;

        output.appendChild(pre);

    }  

    window.addEventListener("load", init, false);

</script>

<h2>WebSocket Test</h2>

<div id="output"></div>

</html>

主要代码解读：

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

var wsUri ="ws://echo.websocket.org/";

websocket = new WebSocket(wsUri);

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

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

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

websocket.onopen = function(evt) {

};

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

websocket.onerror = function(evt) {

};

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

websocket.onmessage = function(evt) {

};

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

websocket.onclose = function(evt) {

};

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. 在ls命令中使用通配符

    通配符比较简单.我们已经知道通配符常常是在shell终端中用来匹配文件名的,今天来看一下在ls命令中使用通配符的例子. 用法:ls [选项]... [文件]... ls本身也有很多的选项,我们今天不看 ...

  2. 【JEECG技术文档】JEECG在线聊天插件功能集成文档

    原文地址:http://jeecg.iteye.com/blog/2320670 JEECG在线聊天插件功能集成文档 前提: 采用jeecg_3.6.3版本以上(Maven工程) 插件项目: 在线聊天 ...

  3. cookie操作：设置cookie、读取cookie、删除cookie

    一.设置cookie function setCookie(name, value){ Days = 1; var exp = new Date(); exp.setTime(exp.getTime( ...

  4. redis集群报错：(error) MOVED 11469 192.168.163.249:7002

    应该是你没有启动集群模式(即缺少了那个"-c"): redis-cli -c -h yourhost -p yourpost

  5. wx小程序自定义组件与页面之间参数传递

    在开发中,很多页面中会使用相同的组件,这时可以将具有相同信息的部分封装成一个组件,方便开发中调用.在调用中可能会涉及到数据的传递问题,例如页面与组件,组件与组件直接的数据传递. 首先看看页面与组件直接 ...

  6. LINUX系统一一常用命令

    前言 LINUX UNIX Centos RedHat Ubuntu SHELL shell脚本 shell shell命令 类似windows系统的bat 批处理文件 里面都是脚本 CentOS6. ...

  7. vc读取当前路径和读取配置ini文件

    //获取路径 std::string GetApplicationDir() { HMODULE hModule = GetModuleHandleW(NULL); WCHAR wpath[MAX_P ...

  8. Android文档 学习目录

    Building Your First App After you've installed the Android SDK, start with this class to learn the b ...

  9. centos 卸载和安装软件

    rpm -qa 列出所有已安装软件包 rpm -e packagename  删除软件包 rpm -e --nodeps packagename  强制删除软件和依赖包 rpm -q 包名     查 ...

  10. Repeater - 重复器

    Repeater - 重复器,用来展示泛型集合中的数据 五大模板:1.HeaderTemplate - 头模板,加载时会在开始执行一次2.FooterTemplate - 脚模板,加载时会在最后执行一 ...