websocket的使用

最新推荐文章于 2024-01-19 13:15:18 发布
最新推荐文章于 2024-01-19 13:15:18 发布
阅读量192 收藏
点赞数
分类专栏： 学习项目 文章标签： websocket socket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dreamimport/article/details/104819211
版权

什么是websocket

Websocket是应用层第七层上的一个应用层协议，WebSocket 的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话。

HTTP 有 1.1 和 1.0 之说，也就是所谓的 keep-alive ，把多个 HTTP 请求合并为一个，但是 Websocket 其实是一个新协议，跟 HTTP 协议基本没有关系，只是为了兼容现有浏览器，所以使用了 HTTP 。

客户端首先会向服务端发送一个 HTTP 请求，包含一个 Upgrade 请求头来告知服务端客户端想要建立一个 WebSocket 连接

WebSocket 的其他特点：

  • 建立在 TCP 协议之上，服务器端的实现比较容易。
  • 与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
  • 数据格式比较轻量，性能开销小，通信高效。
  • 可以发送文本，也可以发送二进制数据。
  • 没有同源限制，客户端可以与任意服务器通信。
  • 协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
  • 简易聊天使用：

<!DOCTYPE html>
<html>
<head>
    <title>简易聊天Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, user-scalable=no">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        html, body {
            min-height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            width: 100%;
            font-family: "Microsoft Yahei", sans-serif, Arial;
        }

        .container {
            text-align: center;
        }

        .title {
            font-size: 16px;
            color: rgba(0, 0, 0, 0.3);
            position: fixed;
            line-height: 30px;
            height: 30px;
            left: 0px;
            right: 0px;
            background-color: white;
        }

        .content {
            background-color: #f1f1f1;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            margin-top: 30px;
        }

        .content .show-area {
            text-align: left;
            padding-top: 8px;
            padding-bottom: 168px;
        }

        .content .show-area .message {
            width: 70%;
            padding: 5px;
            word-wrap: break-word;
            word-break: normal;
        }

        .content .write-area {
            position: fixed;
            bottom: 0px;
            right: 0px;
            left: 0px;
            background-color: #f1f1f1;
            z-index: 10;
            width: 100%;
            height: 160px;
            border-top: 1px solid #d8d8d8;
        }

        .content .write-area .send {
            position: relative;
            top: -28px;
            height: 28px;
            border-top-left-radius: 55px;
            border-top-right-radius: 55px;
        }

        .content .write-area #name {
            position: relative;
            top: -20px;
            line-height: 28px;
            font-size: 13px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="title">简易聊天demo</div>
    <div class="content">
        <div class="show-area"></div>
        <div class="write-area">
            <div>
                <button class="btn btn-default send">发送</button>
            </div>
            <div><input name="name" id="name" type="text" placeholder="input your name"></div>
            <div>
                <textarea name="message" id="message" cols="38" rows="4" placeholder="input your message..."></textarea>
            </div>
        </div>
    </div>
</div>

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
    $(function () {
        // var wsurl = 'ws://127.0.0.1:3000';
        var websocket;
        var i = 0;
        if (window.WebSocket) {
          // 原生js就支持的  
          // WebSocket 建立链接后 就不会在断  相当于打电话 只要不挂断就一直可以通讯
          // 1 前端必须按照步骤写上链接WebSocket 2 后台也需要对应链接上WebSocket
          // 对应我们来说 有人封装了 一个 sockect.io 他就是封装 WebSocket
          // 1 new WebSocket
            websocket = new WebSocket('ws://127.0.0.1:3000');

            //2 连接建立 websocket.onopen
            websocket.onopen = function (evevt) {
                console.log("WebSocket 链接上了");
                $('.show-area').append('<p class="bg-info message"><i class="glyphicon glyphicon-info-sign"></i>Connected to WebSocket server!</p>');
            }
            //3 收到后台发来消息就会执行 websocket.onmessage 
            websocket.onmessage = function (event) {
              // 在这里就 解析判断 后台返回什么数据 对应操作
                var msg = JSON.parse(event.data); //解析收到的json消息数据

                var type = msg.type; // 消息类型
                var umsg = msg.message; //消息文本
                var uname = msg.name; //发送人
                i++;
                if (type == 'usermsg') {
                    $('.show-area').append('<p class="bg-success message"><i class="glyphicon glyphicon-user"></i><a name="' + i + '"></a><span class="label label-primary">' + uname + ' : </span>' + umsg + '</p>');
                }
                if (type == 'system') {
                    $('.show-area').append('<p class="bg-warning message"><a name="' + i + '"></a><i class="glyphicon glyphicon-info-sign"></i>' + umsg + '</p>');
                }

                $('#message').val('');
                window.location.hash = '#' + i;
            }

            //发生错误 链接出错
            websocket.onerror = function (event) {
                i++;
                console.log("Connected to WebSocket server error");
                $('.show-area').append('<p class="bg-danger message"><a name="' + i + '"></a><i class="glyphicon glyphicon-info-sign"></i>Connect to WebSocket server error.</p>');
                window.location.hash = '#' + i;
            }

            //连接关闭 关闭链接
            websocket.onclose = function (event) {
                i++;
                console.log('websocket Connection Closed. ');
                $('.show-area').append('<p class="bg-warning message"><a name="' + i + '"></a><i class="glyphicon glyphicon-info-sign"></i>websocket Connection Closed.</p>');
                window.location.hash = '#' + i;
            }

            function send() {
                var name = $('#name').val();
                var message = $('#message').val();
                if (!name) {
                    alert('请输入用户名!');
                    return false;
                }
                if (!message) {
                    alert('发送消息不能为空!');
                    return false;
                }
                var msg = {
                    message: message,
                    name: name
                };
                try {
                    websocket.send(JSON.stringify(msg));
                } catch (ex) {
                    console.log(ex);
                }
            }

            //按下enter键发送消息
            $(window).keydown(function (event) {
                if (event.keyCode == 13) {
                    console.log('user enter');
                    send();
                }
            });

            //点发送按钮发送消息
            $('.send').bind('click', function () {
                send();
            });

        }
        else {
            alert('该浏览器不支持web socket');
        }

    });
</script>
</body>
</html>
dreamimport
关注
专栏目录
Python3 使用Websocket通信
绝望的乐园
04-17 6304
这篇文章写一下python如何使用websocket通信，包括server和client部分。 Websocket Server 尝试了一下：https://github.com/aaugustin/websockets ，git上star最多的，但是个人用着不是很舒服，大家有兴趣可以看看。 后面用了一下：https://github.com/dpallot/simple-websocket-se...
Python websocket简单使用示例
随风的博客
03-16 5175
websocket使用示例
WebSocket的引入
我的博客
10-07 1935
目录 WebSocket的基本使用 使用WebSocket改造项目
Python 实现 WebSocket 通信
CSDN
11-17 1万+
WebSocket是一种在Web应用程序中实现双向通信的协议。与传统的HTTP请求-响应模型不同，WebSocket允许服务器主动向客户端推送数据，实现实时性和互动性。：WebSocket提供了全双工通信，允许服务器和客户端同时发送和接收数据。相比起传统的HTTP请求-响应模型，WebSocket使得服务器可以主动推送数据给客户端，而不需要客户端首先发起请求。：与HTTP请求不同，WebSocket连接是持久的，即一旦建立连接，它将保持打开状态，直到其中一方关闭连接或发生错误。
WebSocket原理及用Python实现的应用
sinat_35773915的博客
07-18 3524
WebSocket是一种实现全双工通信的协议，通过建立持久连接实现实时交互。Python提供了多个库和框架来实现WebSocket应用，如websockets库。使用WebSocket可以实现实时通信、聊天室、实时数据更新等功能。
websocket使用案例
08-28
在这个"WebSocket使用案例"中，我们可以预期会了解到以下关键点： 1. **WebSocket握手**：WebSocket连接的建立始于客户端发起一个HTTP Upgrade请求，服务器回应101 Switching Protocols状态码，表示同意升级到...
C# WebSocket使用实例源码，包含服务端和客户端
03-13
总的来说，这个"C# WebSocket使用实例"是一个很好的学习资源，它涵盖了WebSocket的基本概念和C#实现细节。通过研究和运行这个示例，开发者可以更好地理解和掌握WebSocket在实际项目中的应用，特别是在需要实时数据...
go-websocket-examples:Go语言WebSocket使用例子
05-16
本项目"Go语言WebSocket使用例子"提供了一系列示例，帮助开发者理解和实践Go中的WebSocket编程。 在Go中，WebSocket的实现主要依赖于`gorilla/websocket`库，这是一个非常流行的WebSocket库，提供了易于使用的API。...
uni-app中H5、PC端websocket使用
08-24
在uni-app框架中，我们不仅可以使用WebSocket在移动H5环境中，还可以扩展到桌面PC端，实现高效且实时的数据交互。 在uni-app中，WebSocket的使用主要包括以下几个关键步骤： 1. **初始化WebSocket连接**： 在uni-...
C#工作总结（一）：Fleck的WebSocket使用-附件资源
03-02
C#工作总结（一）：Fleck的WebSocket使用-附件资源
websocket-client（websocket）和websockets区别
Hiking_Yu的专栏
10-06 7574
一、websocket-client 是一个websocket服务的client端模块 导入时需要使用 import websocket 是比较简单易用的模块，典型的用法如下： import websocket try: import thread except ImportError: import _thread as thread import time def on_me...
WebSocket的基本使用
qq_62898618的博客
12-29 1万+
websocket 是 javax.websocket下面的，不需要任何依赖，直接就可以使用@ServerEndpoint 标记声明一个websocket 服务 ，configurator 属性指定 鉴权 配置类,@ServerEndpoint 标记的类 为每个链接会创建一个该对象实例，也就是成员变量这个链接内私有。
Python websocket之 websocket-client 库的使用
热门推荐
tz_zs的博客
08-04 3万+
____tz_zs 本次，我将从主流的三方框架使用出发，带大家熟悉和使用 Python 中常见的 websocket 库。 一、websocket-client 库 websocket-client 库是一个简单好用的同步的 websocket 的客户端的库，基于回调的方式使用。 pypi地址： https://pypi.org/project/websocket-client/ GitHub地址： https://github.com/websocket-client/websocket-client
python之websocket数据爬取
naer_chongya的博客
06-13 2654
在本文中，我们介绍了如何使用Python和Tornado框架实现WebSocket数据爬取。如何使用websocket-client模块创建WebSocket客户端。如何创建Tornado请求处理类，处理客户端的WebSocket请求。如何启动Tornado服务并将请求处理类映射到相应的路径。注意事项：WebSocket客户端与Tornado内部循环机制不能共存。
简单的websocket实现
Dave's Blog
09-19 3564
一个简单的websocket实现server和client通信。
Python—WebSocket爬虫实战
初一的博客
03-11 8358
1.WebSocket
WebSocket使用及封装
最新发布
weixin_60901596的博客
01-19 815
然后，在组件中通过 import 语句引入 WebSocketService，并在 created 钩子中调用 initWebSocket 方法来初始化 WebSocket 连接。在 initWebSocket 方法中，我们创建了一个 WebSocketService 实例，并使用 on 方法添加了一个 message 事件监听器，以及在连接建立后更新消息和打印日志。这样，我们就成功地将 WebSocket 功能封装在一个单独的服务中，并在组件中使用该服务来处理 WebSocket 相关操作。
web socket通讯 一知半解~~
眉目成书
08-14 692
websocket服务器，与客户端通讯
websocket 在python中的使用
lhzhqq的博客
11-17 2054
websocket 的作用就不在此赘述了，下面通过一个简单的案例介绍websocket的使用。
websocket使用
09-25
WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它可以让客户端和服务器之间进行实时通信。在使用 WebSocket 时，客户端和服务器之间会建立一个长连接，这样客户端就可以向服务器发送数据，并从服务器接收数据。相比于传统的 HTTP 请求，WebSocket 的优势是可以实现实时通信，而且不需要频繁地发起请求和响应。 下面是使用 WebSocket 的基本步骤： 1. 客户端向服务器发起 WebSocket 连接请求。 2. 服务器接收到 WebSocket 连接请求，并建立连接。 3. 客户端和服务器之间进行实时通信。 4. 当通信结束时，客户端和服务器都可以关闭连接。 在 JavaScript 中，可以使用 WebSocket 对象来实现 WebSocket 通信。以下是一个简单的 WebSocket 示例： ```javascript // 创建 WebSocket 对象 var ws = new WebSocket('ws://localhost:8080'); // 监听连接事件 ws.onopen = function() { console.log('WebSocket 已连接'); }; // 监听消息事件 ws.onmessage = function(evt) { console.log('收到消息：' + evt.data); }; // 发送消息 ws.send('Hello, WebSocket!'); // 关闭连接 ws.close(); ``` 在上面的示例中，我们首先创建了一个 WebSocket 对象，然后监听了连接事件和消息事件。当连接建立成功时，会触发 onopen 事件；当收到消息时，会触发 onmessage 事件。我们还可以使用 send 方法向服务器发送消息，使用 close 方法关闭连接。 在服务器端，也可以使用 WebSocket 对象来实现 WebSocket 通信。具体实现方式可以参考各种编程语言的 WebSocket 库和示例代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值