Websocket 系列之初识websocket(一)

Websocket 系列之初识websocket(一)

月光魔力鸭

2020-06-22 17:08 阅读 65 喜欢 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 ,这个是阮大大推荐的,去看了下应该还不错,尝试用下。


// 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


感谢支持!

赞赏支持
提交评论
评论信息(请文明评论)
暂无评论,快来快来写想法...
推荐
当我们使用web打印相关的解决方案的时候,还有不少小坑值得注意下,同时需要了解几个小技巧提升在web打印上的友好度,以下整理一些常见的小技巧
上一章,我们学习和了解了websocket 是什么以及初始搭建,接下来,我们继续了解,如何进行广播以及对应的私聊呢。
上一张中已经完成了比较简易的3D全景浏览,但是...这是写死在xml中的,对于我们实际的项目,这种情况是不可能适应的。所以,来了解下如何动态加载xml已经设置对应的热点。
BUG 报错Tainted canvases may not be exported 。 在通过canvas 调用 toDataURL的时候出现的问题。
ubuntu 配置nginx反向代理,这里简单记录下,后续再复习..
在程序中,会有需要后台一直运行的场景。这一节我们来做一个监控某网站的运行状态,如果没有运行,则改变当前的图标。
昨天客户发现了个小BUG,文章发布使用的ueditor, 上传视频的时候当时好好的,后来怎么就是播放不了?
本来是想做一个图床,然后在chrome扩展中添加上,但是发现chrome的扩展有点毫无头绪,只能从头练习,从头学了。