关闭

WebSocket的原理及WebSocket API的使用,js中如何运用websocket

时间: 2017-11-08阅读: 9839标签: js知识

在Websocket出现之前,我们要实现和服务器端保持实时通信,只能采用long poll和ajax轮询,它们的原理都是让浏览器隔个几秒就发送一次请求,询问服务器是否有新信息。都是通过不断地建立HTTP连接,然后等待服务端处理, 这对应服务器来说消耗是非常大。在这样的前提下,Websocket就出现了,它很好的解决了http协议的被动型,这样服务端就能主动推送信息给客户端了。

Websocket 是什么? 

WebSocket是html5下一种新的协议,为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接,此后服务端与客户端通过此TCP连接进行实时通信,能更好的节省服务器资源和带宽并达到实时通讯的目的。但是它和HTTP最大不同是:  

WebSocket是一种双向通信协议。在建立连接后,WebSocket服务器端和客户端都能主动向对方发送或接收数据,就像Socket一样;
WebSocket需要像TCP一样,先建立连接,连接成功后才能相互通信。

传统HTTP客户端与服务器请求响应模式如下:  


WebSocket客户端与服务器请求响应模式如:  


从上图可以看出:WebSocket只需要经过一次HTTP请求,就可以做到源源不断的信息传送了。(在程序设计中,这种设计叫做回调,即:你有信息了再来通知我,而不是我傻乎乎的每次跑来问你),这样的协议解决了上面同步有延迟,而且还非常消耗资源的这种情况。

Websocket 的应用场景

社交聊天、多玩家游戏、弹幕、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等,都需要高实时的场景  

html5 WebSockets API  

1、浏览器支持情况检测 

function demo() {  
    if (window.WebSocket) {  
        //支持 
    } else {  
        //不支持
    }  
}

2、WebSocket对象的创建和服务器连接 

创建了Websocket实例,WebSocket构造函数的第二个参数既可以是字符串,也可以是字符串组,代表应用能够使用的协议;其中ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。    

ws = new WebSocket("ws://127.0.0.1:8080/Server_Test.php");  
w = new WebSocket(url);
//或w = new WebSocket(url,['proto1','proto2']);

3. 建立连接后回调函数

ws.onopen = function(event){}

4. 收到服务端消息后回调函数

ws.onmessage = function(event){}

5. 关闭连接后回调函数

ws.onclose = function(event){}

6. 连接错误后回调函数

ws.onerror = function(event)

7. 发送数据

ws.send('服务器,您好');

8. 查看当前连接状态

console.log(ws.readyState)

9.服务器端的实现(以php为例):

//1. 创建服务端WebSocket对象,等待客户端接入             
$master  = WebSocket("localhost",10000);             
首先创建Websocket,然后服务端监听相应端口,等待客户端接入             
function WebSocket($address,$port){
	$master=socket_create(AF_INET, SOCK_STREAM, SOL_TCP)  or die("socket_create() failed");             
	socket_set_option($master, SOL_SOCKET, SO_REUSEADDR, 1)  or die("socket_option() failed");             
	socket_bind($master, $address, $port) or die("socket_bind() failed");             
	socket_listen($master,20) or die("socket_listen() failed");             
	echo "Server Started : ".date('Y-m-d H:i:s')."\n";             
	echo "Master socket  : ".$master."\n";             
	echo "Listening on   : ".$address." port ".$port."\n\n";             
	return $master;             
}          
//2. 从WebSocket中读取数据             
$buffer = socket_read($socket,2048);          
//3. 当收到客户端首次连接请求后,生成握手信息并回复             
$return_str = dohandshake($buffer);             
socket_write($socket,$return_str,strlen($return_str));          
//4. 连接后,即可接收并解析出客户端的数据             
$buffer = socket_read($socket,2048);             
$data_str = decode($buffer);          
//5. 接收到用户数据后,直接回复客户端             
socket_write($socket,$return_str,strlen($return_str));          
//6. 断开连接             
socket_close($socket);

WebSocket例子

在这里写一下在Tomcat8下执行的例子。例子由客户端页面和WebSocket服务程序组成,功能在Echo基础上增加一个服务端定时发送信息的功能。

ws.html代码

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>Test WebSocket</title>  
<script type="text/JavaScript">  
    //显示信息  
    var log = function(s) {  
        if (document.readyState !== "complete") {  
            log.buffer.push(s);  
        } else {  
            document.getElementById("output").textContent += (s + "\n");  
            document.getElementById("outputdiv").scrollTop = document.getElementById("outputdiv").scrollHeight;  
        }  
    }  
    log.buffer = [];  
    //显示连接状态  
    function setConnected(status) {  
        document.getElementById("socketstatus").innerHTML = status;  
    }  
    var ws = null;  
      
    //连接  
    function connect() {  
        if (ws != null) {  
            log("现已连接");  
            return ;  
        }  
        url = "ws://localhost:8080/websocket/mywebsocket";  
        if ('WebSocket' in window) {  
            ws = new WebSocket(url);  
        } else if ('MozWebSocket' in window) {  
            ws = new MozWebSocket(url);  
        } else {  
            alert("您的浏览器不支持WebSocket。");  
            return ;  
        }  
        ws.onopen = function() {  
            log("open");  
            setConnected("已连接");  
            //设置发信息送类型为:ArrayBuffer  
            ws.binaryType = "arraybuffer";  
              
            //发送一个字符串和一个二进制信息  
            ws.send("thank you for accepting this WebSocket request");  
            var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);  
            ws.send(a.buffer);  
        }  
        ws.onmessage = function(e) {  
            log(e.data.toString());  
        }  
        ws.onclose = function(e) {  
            log("closed");  
        }  
        ws.onerror = function(e) {  
            log("error");  
        }  
    }  
      
    //断开连接  
    function disconnect() {  
        if (ws != null) {  
            ws.close();  
            ws = null;  
            setConnected("已断开");  
        }  
    }  
      
    window.onload = function() {  
        connect();  
        log(log.buffer.join("\n"));  
        //发送页面上输入框的信息  
        document.getElementById("sendButton").onclick = function() {  
            if (ws != null) {  
                ws.send(document.getElementById("inputMessage").value);   
            }  
        }  
        //停止心跳信息  
        document.getElementById("stopButton").onclick = function() {  
            if (ws != null) {  
                var a = new Uint8Array([1, 9, 2, 0, 1, 5, 1, 6]);  
                ws.send(a.buffer);   
            }  
        }  
    }  
</script>  
</head>  
<body onunload="disconnect();">  
    <div>连接状态:<span id="socketstatus"></span></div>  
    <div>  
        <input type="text" id="inputMessage" value="Hello, WebSocket!">  
        <button id="sendButton">发送</button><button id="stopButton" style="margin-left:15px">停止心跳信息</button>  
    </div>  
    <div>  
        <button id="connect" onclick="connect();">连接</button>  
        <button id="disconnect" onclick="disconnect();">断开</button>  
    </div>  
    <div style="height:300px; overflow:auto;" id="outputdiv">  
        <pre id="output"></pre>  
    </div>  
</body>  
</html>

Websocket服务端java程序代码:

package com.test.wsocket;  
 
import java.io.IOException;  
import java.nio.ByteBuffer;  
import java.util.Random;  
import java.util.Timer;  
import java.util.TimerTask;  
  
import javax.websocket.OnClose;  
import javax.websocket.OnMessage;  
import javax.websocket.OnOpen;  
import javax.websocket.PongMessage;  
import javax.websocket.Session;  
import javax.websocket.server.ServerEndpoint;  
  
@ServerEndpoint("/mywebsocket")  
public class MyWebSocket {  
      
    private Session session;  
    private static final Random random = new Random();  
    private Timer timer = null;  
    //停止信息信息指令  
    private static final ByteBuffer stopbuffer  = ByteBuffer.wrap(new byte[]{1, 9, 2, 0, 1, 5, 1, 6});  
      
    /**  
     * 打开连接时执行  
     * @param session  
     */  
    @OnOpen  
    public void start(Session session) {  
        this.session = session;  
        try {  
            System.out.println("open");  
            if (session.isOpen()) {  
                //设置心跳发送信息。每2秒发送一次信息。  
                timer = new Timer(true);  
                timer.schedule(task, 1000, 2000);  
            }  
        } catch (Exception e) {  
            try {  
                session.close();  
            } catch (IOException e1) {}  
        }  
    }  
  
    /**  
     * 接收信息时执行  
     * @param session  
     * @param msg 字符串信息  
     * @param last  
     */  
    @OnMessage  
    public void echoTextMessage(Session session, String msg, boolean last) {  
        try {  
            if (session.isOpen()) {  
                System.out.println("string:" + msg);  
                session.getBasicRemote().sendText(msg, last);  
            }  
        } catch (IOException e) {  
            try {  
                session.close();  
            } catch (IOException e1) {  
                // Ignore  
            }  
        }  
    }  
  
    /**  
     * 接收信息时执行  
     * @param session  
     * @param bb 二进制数组  
     * @param last  
     */  
    @OnMessage  
    public void echoBinaryMessage(Session session, ByteBuffer bb, boolean last) {  
        try {  
            if (session.isOpen()) {  
                //如果是停止心跳指令,则停止心跳信息  
                if (bb.compareTo(stopbuffer) == 0) {  
                    if (timer != null) {  
                        timer.cancel();  
                    }  
                } else {  
                    session.getBasicRemote().sendBinary(bb, last);  
                }  
            }  
        } catch (IOException e) {  
            try {  
                session.close();  
            } catch (IOException e1) {  
                // Ignore  
            }  
        }  
    }  
      
    /**  
     * 接收pong指令时执行。  
     *  
     * @param pm    Ignored.  
     */  
    @OnMessage  
    public void echoPongMessage(PongMessage pm) {  
        // 无处理  
    }  
      
    @OnClose  
    public void end(Session session) {  
        try {  
            System.out.println("close");  
            if (timer != null) {  
                timer.cancel();  
            }  
        } catch(Exception e) {  
        }  
    }  
      
    /*  
     * 发送心跳信息  
     */  
    public void sendLong(long param) {  
        try {  
            if (session.isOpen()) {  
                this.session.getBasicRemote().sendText(String.valueOf(param));  
            }  
        } catch (IOException e) {  
            try {  
                this.session.close();  
            } catch (IOException e1) {}  
        }  
    }  
      
    /**  
     * 心跳任务。发送随机数。  
     */  
    TimerTask task = new TimerTask() {  
        public void run() {     
            long param = random.nextInt(100);  
            sendLong(param);  
        }     
    };  
}

Web.xml代码

<?xml version="1.0" encoding="UTF-8"?>  
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">  
  <display-name>websocket</display-name>  
  <welcome-file-list>  
    <welcome-file>index.html</welcome-file>  
  </welcome-file-list>  
    
  <filter>  
        <filter-name>Set Character Encoding</filter-name>  
        <filter-class>org.apache.catalina.filters.SetCharacterEncodingFilter</filter-class>  
        <init-param>  
            <param-name>encoding</param-name>  
            <param-value>UTF-8</param-value>  
        </init-param>  
        <init-param>  
            <param-name>ignore</param-name>  
            <param-value>true</param-value>  
        </init-param>  
    </filter>  
      
    <filter-mapping>  
        <filter-name>Set Character Encoding</filter-name>  
        <url-pattern>/*</url-pattern>  
    </filter-mapping>  
</web-app>

将以上程序部署到Tomcat8下,启动服务。 

完结~~~~~~~~~~

 



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/64

关闭

JS方法整理_js常用函数大全

都是日常工作中使用的一些js方法,整理出来以便大家学习使用。主要包括:Js获取页面地址参数 、千分位 、判断是否数字 、图片按比例压缩、截取指定字节数的字符串、判断是否微信 、获取时间格式的几个举例 、获取字符串字节长度 、对象克隆、深拷贝 ...

js实现获取手机相册并上传

当初有很多人说使用form方法将文件封装来上传,可是因为要照顾到从相机中选择图片,所以一直没有去做。 后来看到了Uploader的方法来传文件,感觉自己找到了 。是使用plus.uploader来完成的

深入理解JS中引用类型和基本类型

javascript中基本类型指的是那些保存在栈内存中的简单数据段,即这种值完全保存在内存中的一个位置。 引用类型指那些保存在堆内存中的对象,意思是变量中保存的实际上只是一个指针,这个指针指向内存中的另一个位置,该位置保存对象。

Js继承实现小结:JavaScript实现继承的6种方式

JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?1、原型链继承,2、构造继承,3、实例继承,4、拷贝继承,5、组合继承,6、寄生组合继承

Performance_js中计算网站性能监控利器

Performance提供的方法可以灵活使用,获取到页面加载等标记的耗时情况。Performance.timing属性对象提供了浏览器从打开网页到加载完成之间各个节点的耗时数据,包括重定向开始、DNS查询、浏览器响应数据、DOM解析等相关节点

打造自己的JavaScript武器库

作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数,这些工具类函数

js检测页面上一个元素是否已经滚动到了屏幕的可视区域内

只要页面加载了,其中在页面中出现的li就向控制台输出第几个发送请求;在本次加载的页面中,再将滚动条滚回前边的li,不再向控制台输出东西,也就是说已经显示过的li,不再向控制台输出东西。

avaScript与WebAssembly进行比较+在哪些情况下会优于JavaScript

这是专门探索JavaScript及其构建组件的系列,在识别和描述核心元素的过程中,我们还分享了构建SessionStack时使用的一些经验法则,这是一个轻量级但健壮且高性能的JavaScript应用程序,以帮助用户实时查看和重现其Web应用程序的缺陷。

原生js实现数字三位逗号,分隔。js实现支持逗号分割的货币格式表示法总汇

javascript实现数字三位逗号分隔,如把123456.78转换为123,456.78。js实现支持货币格式表示法:toLocaleString在将数字转换为字符串的同时,会使用三位分节法进行显示。slice 方法用于截取字符串中的一部分并返回该部分字符串。match方式代表正则表达式的匹配....

javascript中的依赖注入

使用没有依赖的模块,显然这是很难实现的。即使你创建了很好的像黑盒一样的组件,但总有个将所有部分合并起来的地方。这就是依赖注入起作用的地方,当前来看,高效管理依赖的能力是迫切需要的,本文总结了原作者对这个问题的看法。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!