<!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. VS2017创建一个 ASP.NET Core2.0 应用，并搭建 MVC 框架

    https://testerhome.com/topics/11747 1.使用最新版本的VS2017,并安装.NET Core2.0中相关开发工具   2.打开VS2017,点击文件-新建-项目,选 ...

  2. 06.linux文件目录操作命令

    文件目录操作命令: ›ls 显示文件和目录列表 -l 列出文件的详细信息 -a 列出当前目录所有文件,包含隐藏文件 ›mkdir 创建目录 -p 父目录不存在情况下先生成父目录 ›cd 切换目录 ›t ...

  3. Django的路由层详情

    1. Django的路由解析: 是从上往下进行匹配的 url(r'index', views.index) #这里的index 解析都可以被解析到的, abcindex index indexabc ...

  4. vue语法小练习

    实现功能:新增/删除 学生 <html> <head> <script src="https://cdn.staticfile.org/vue/2.2.2/vu ...

  5. System.Types.hpp(77): E2029 'TObject' must be a previously defined class or struct

    System.Types.hpp System.Types.hpp(77): E2029 'TObject' must be a previously defined class or struct ...

  6. mysql 的sleep线程过多处理方法

    php程序不要使用长连接:java程序调整连接池 什么是长连接? 其实长连接是相对于通常的短连接而说的,也就是长时间保持客户端与服务端的连接状态. 通常的短连接操作步骤是: 连接->数据传输-& ...

  7. cvc-complex-type.2.4.a: Invalid content was found starting with element 'async-supported'. One of '{"http://java.sun.com/xml/ns/javaee":init-param}' is expected.

    第一种方案:  将  "http://java.sun.com/xml/ns/javaee"  换为  "http://java.sun.com/xml/ns/j2ee& ...

  8. 使用arguments对象验证函数的参数是否合法

    <script>function sum(arg1,arg2) //加法函数{ var realArgCount = arguments.length; //调用函数时传递的实参个数 va ...

  9. 关于那个.get .post .ajax ztree 还有后台servlet传递数据

    servlet给前台传递data串 用的方法是 PrintWriter out = response.getWriter(); // response.sendRedirect("test. ...

  10. DBCC维护语句语法

    一.DBCC维护语句:对数据库.索引或文件组进行维护的任务--1.DBCC CLEANTABLE,回收删除的可变长度列和文本列的空间 DBCC CLEANTABLE  ( { 'database_na ...