Websocket 系列之初识websocket(一)

Websocket 系列之初识websocket(一)

月光魔力鸭

2020-06-22 17:08 阅读 706 喜欢 1 websocket 系列

最近在做直播,是用的webrtc,然后找的免费的starrtc ,当然,可能由于种种原因吧.. 用起来并没有特别顺畅,后续还希望能够深入这部分,从现在开始学习..当然,websocket 是顺带的,可以用来发消息什么的肯定也是要用到的。

准备将最近一阵子学习websocket的记录和练习以及一些理解记录下来。

当然,写这篇文章的时候,其实我也刚刚把helloworld跑起来,以前的时候使用nodejs也做过聊天室啥的,但都比较简陋,也没有说比较系列。

当然,现在学的也不是多深入,但是会尽可能的详细一些,底层的东西也不懂,也不是说几天就能搞定的,光我的三级英语就够我喝一壶了 o(≧口≦)o

好了,话不多说,下面直接进入主题。


websocket 是什么

websocket 是一种浏览器与服务器间进行全双工通讯的网络技术,网络通信协议。 在以往的通信中,都是由客户端发起请求,由服务端接受到请求然后返回查询结果。 服务端无法主动向客户端推送信息,属于单向请求,如果服务端变化比较多或客户端需要实时的数据,那么在之前我们只能轮询。

"轮询",在客户端通过定时请求服务器来及时获得服务端的信息。

其中,使用websocket 最典型的场景就是聊天室,在没有websocket的时候,客户端要时时刻刻的请求查询服务端的新的消息,然后展示,非常浪费资源。

因此,有了websocket.

websocket 历史

诞生于2008年,2011年成为国际标准,目前所有浏览器(低版本不考虑)都已经支持,属于服务器推送技术的一种。

特点:

websocket的hello world

websocket 需要一个服务端,这里由于nodejs比较简单,直接使用了nodejs做后端支持。

后端代码

使用uwebsockets ,这个是阮大大推荐的,去看了下应该还不错,尝试用下。

npm i uNetworking/uWebSockets.js#v18.1.0

server code : app.js


// require('uWebSockets.js').SSLApp({
require('uWebSockets.js').App({

    /* There are tons of SSL options */
    // key_file_name: 'misc/key.pem',
    // cert_file_name: 'misc/cert.pem',

}).ws('/*', {

    /* For brevity we skip the other events */
    message: (ws, message, isBinary) => {
        if (!isBinary) {
            let content = Buffer.from(message).toString();
            console.log(`from client : ${content}`);
        }
        let ok = ws.send('hello,this is server', isBinary);
    }

}).any('/*', (res, req) => {

    /* Let's deny all Http */
    res.end('Nothing to see here!');

}).listen(9001, (listenSocket) => {

    if (listenSocket) {
        console.log('Listening to port 9001');
    }

});

安装后,运行是这样的。

server 运行

前端页面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scoket.io</title>
</head>
<body>
    websockets test,check console
    <script>
        var ws = new WebSocket("ws://localhost:9001");
        ws.onopen = function(evt) { 
            console.log("Connection open ..."); 
            ws.send("Hello WebSockets!");
        };

        ws.onmessage = function(evt) {
            console.log(evt);
            console.log( "Received Message: " + evt.data);
            ws.close();
        };

        ws.onclose = function(evt) {
            console.log("Connection closed.");
        };      
    </script>
</body>
</html>

index.html 通过anywhere-auth 运行后

可以看到已经连到服务端,并收到了服务端发来的消息。

server 在index.html 运行后收到的消息


至此,websocket的第一步helloworld 算是完成,不过这个时候还会有些疑惑,为什么感觉还是像http呢,发了请求收到数据... 下一章,我们继续来丰富功能。

转载请注明出处: https://chrunlee.cn/article/websocket-learn-day1.html


感谢支持!

赞赏支持
提交评论
评论信息 (请文明评论)
暂无评论,快来快来写想法...
推荐
昨天实现一个tabbar的时候发现怎么都无法跳转,直接拿的官方的demo,后来才发现是自定义tabbar的问题。
国庆马上来临,头像已经先热起来了,为了蹭蹭热度,赶紧加班搞了一个。
一直有跑着puppeteer在做pdf的生成,可以今天突然发现一个问题:预览与打印生成的PDF不一致,猜测可能是边距导致的,应该是没设置好... 然后当我在本地尝试的时候也发现了这个问题..要么是字符,要么是版本
反爬有很多手段,字体反爬就是其中之一。之前一直都是听过,但是却没怎么在实际爬虫中遇到过,最近在一个爬虫题目网站上看到了,试了试,发现还挺麻烦,当然自己从头研究字体肯定麻烦,简单的是模块多的是,选几个就过了。
上一章,我们学习和了解了websocket 是什么以及初始搭建,接下来,我们继续了解,如何进行广播以及对应的私聊呢。
最近一段时间想着做个资源网站,奈何没数据,准备从几个相关的站点上抓一些数据,数据量每个站点都在几千万左右,这里简单总结下最近一段时间在做的测试。
最近有个小功能需要一些基础数据,找了一下在小程序上有发现,暂时还没找到他的网站,想着把这些数据爬一些下来做为基础数据使用的。本来还想着直接反编译小程序的,没想到微信变更了加密方式,以前反编译的路子走不通了。
BUG 报错Tainted canvases may not be exported 。 在通过canvas 调用 toDataURL的时候出现的问题。