<!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. golang web框架 beego

    尝试了下,在go环境ready的情况下,花了2分钟完成了beego安装.项目生成和启动,效率还是不错的 1.安装: go get github.com/astaxie/beego go get git ...

  2. 【Linux】CentOS7 安装，遇到的各种问题，并修复win7启动项

    https://www.cnblogs.com/sxdcgaq8080/p/7457255.html ------------------------------------------------- ...

  3. 十张GIFs让你弄懂递归等概念

    图像(包括动图)是传递信息的一种高效方式,往往能增强表象.记忆与思维等方面的反应强度.所谓一图胜千言,说的就是这个道理. 今天为大家整理了十张动图GIFS,有助于认识循环.递归.二分检索等概念的具体运 ...

  4. unity 获取网络时间

    http://cgi.im.qq.com/cgi-bin/cgi_svrtime public int year, mouth, day, hour, min, sec; public string ...

  5. English: How to Pronounce R [ɹ] Consonant

    English: How to Pronounce R [ɹ] Consonant Share Tweet Share Tagged With: Most Popular, Sound How-To ...

  6. Redis进阶实践之四Redis的基本数据类型（转载4）

    Redis进阶实践之四Redis的基本数据类型 一.引言 今天正式开始了Redis的学习,如果要想学好Redis,必须先学好Redis的数据类型.Redis为什么会比以前的Memchaed等内存缓存软 ...

  7. webpack异步加载业务模块

    虽然把我们用到的JS文件全部打包一个可以节省请求数,但如果打包后的JS文件过大,那么也容易出现白屏现象,许多操作失灵.而且一些区域是点到才出现,那么相关的JS其实可以剥离出这个大JS文件外.这就涉及到 ...

  8. 关于HashMap多线程下环形链表的总结

    目录 1. 概述 2. 敲黑板的点 3. 为什么会出现循环链表的情况呢?(jdk1.7) 4. jdk1.8中改进了resize方法 5. HashMap的线程安全问题 6. 总结 1. 概述 本文主 ...

  9. ios嵌套H5页面，出现的小bug；

    ios嵌套H5页面,点击数字时就会弹出打电话的功能:解决方法: 在head标签中添加: <meta name="format-detection" content=" ...

  10. C# 读取ini文件，读不出来原因

    先赋上相关读取ini文件代码 public class INIHelper { public string inipath; [DllImport("kernel32")] pri ...