WebSocket案例(一) 客户端

C.J.Y

已于 2023-05-07 19:58:25 修改

阅读量738

点赞数 1

分类专栏：网络协议文章标签： websocket html5 javascript

于 2023-05-07 19:47:10 首次发布

本文链接：https://blog.csdn.net/weixin_44879791/article/details/130542687

版权

网络协议专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言

本文将用一个简单的页面案例来介绍WebSocket的客户端的创建方法，也就是如何使用浏览器向服务端发起WebSocket连接。

一. 创建工作空间

首先需要创建一个简单的html文件，这个文件中包含一个输入框，两个按钮和一个之后用来接收服务端信息的模块。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>

<body>
    <input id="text" type="text"/>
    <button onclick="send()">发送消息</button>
    <button onclick="closeWebSocket()">关闭连接</button>

    <div id="message">
    </div>
</body>

</html>

接着在后面写入JavaScirpt代码，也就是写入WebSocket客户端创建的代码。在写入实现代码之前，需要了解一下WebSockets 。

WebSockets 是一种先进的技术，它可以在用户的浏览器和服务器之间打开交互式通信会话。使用此 API，可以向服务器发送消息并接收事件驱动的响应，而无需通过轮询服务器的方式以获得响应。

WebSockets 这种技术中有一个接口名为WebSocket，它是一个用于连接 WebSocket 服务器的主要接口，之后可以在这个连接上发送和接受数据。接下来的案例则是使用该接口创建一个WebSocket对象来进行管理。

二.客户端的实现步骤：

1.创建对象

使用WebSocket接口创建对象，在创建对象之前，需要确定当前使用的浏览器是否支持该技术，不支持则无法进行一下步操作。

使用WebSocket接口中的构造器创建对象，构造器中传入要连接的 URL，也就是WebSocket 服务器将响应的 URL。其中ws表示使用的是WebSocket协议；还有一种wss相较于ws更为安全，他们类似于http和https。

    let webSocket = null;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //连接WebSocket节点
        websocket = new WebSocket("ws://localhost:8080/webSocketServer");
    } else {
        //弹出警告框,当前浏览器不支持websocket
        alert('Not support websocket')
    }

2.处理事件

在上述对象创建成功的基础上，就可以使用该对象处理事件了，事件主要分为以下4种：

事件	事件监听器	描述
open	webSocket.onopen	用于指定连接成功后的回调函数
message	webSocket.onmessage	用于指定当从服务器接受到信息时的回调函数
error	webSocket.onerror	用于指定连接失败后的回调函数
close	webSocket.onclose	用于指定连接关闭后的回调函数

2.1 事件监听

简单来说就是使用 webSocket对象.on+事件名可以得到得到一个监听器，然后编写一个匿名方法赋值给监听器。当监听器的条件被满足时，则会调用对应的匿名方法。

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }
    
    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };
    
    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("close");
    }

2.2 自定义方法

在上述监听器中使用到了一个自定义的方法，该方法功能是在之前页面设置的服务器消息模块显示数据。其中使用到了DOM(文档对象模型），通过解析文档对象来获取之前页面设置的消息模块并把信息追加在末尾。

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

之前页面定义了两个按钮，其分别对应着发送消息和关闭连接的功能，而WebSocket对象也有发送和关闭的两个方法，只需要在自定义方法中分别调用send()和close()即可实现。

    //发送消息
    function send() {
        //使用DOM来获取页面发送的信息
        let message = document.getElementById('text').value;
        websocket.send(message);
    }

    //按钮关闭连接
    function closeWebSocket() {
        websocket.close();
    }

2.3 窗口监听

除了按钮可以主动关闭WebSocket连接以外，直接关闭浏览器窗口也会关闭连接，故此需要一个窗口监听器，来防止连接还没断开就关闭窗口，服务端出现异常。

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接
    window.onbeforeunload = function () {
        websocket.close();
    }

三.客户端的完成代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>

<body>
<input id="text" type="text"/>
<button onclick="send()">发送消息</button>
<button onclick="closeWebSocket()">关闭连接</button>

<div id="message">
</div>
</body>

<script type="text/javascript">

    let webSocket = null;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //连接WebSocket节点
        websocket = new WebSocket("ws://localhost:8080/webSocketServer");
    } else {
        //弹出警告框,当前浏览器不支持websocket
        alert('Not support websocket')
    }

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("连接成功");
    }

    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("close");
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("error");
    };

    //发送消息
    function send() {
        let message = document.getElementById('text').value;
        websocket.send(message);
    }

    //按钮关闭连接
    function closeWebSocket() {
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        websocket.close();
    }

</script>

</html>