初识websocket

不完美00 发表于 2019-03-25 18:25:32

标签: websocket, nodejs

- +

之前对websocket是一点都不了解(H5都那么久了,实在不该),由于工作中需要了解websocket相关知识,自己查阅资料、模拟环境、调试等一系列操作之后从网上看到适合小白的一段代码,Ctrl+C,Ctrl+V之后,在代码中加了自己的理解,代码中注释是自己的一些看法,理解如有误,路过的大神多指正,小白级别,勿喷哦。

 

在服务端使用了nodejs中ws模块,以便在本地开启websocket服务端

安装node环境,并

npm install ws –g ; npm install uuid –g ; npm install

 

新建server.js

//服务端使用nodejs中ws模块,在wss对象中如果不写host参数,默认host指向localhost(127.0.0.1),如果使用默认的host,服务端和客户端在使用localhost和127.0.0.1时尽量书写一致,不然可能会引起websocket连接过慢哦,小伙伴们可以自行测试一下。
var WebSocket = require('ws');
var WebSocketServer = WebSocket.Server,
wss = new WebSocketServer({ port: 8181 });
var uuid = require('node-uuid');    //unique identifier 惟一标识符        -->> uid
//  uuid.v1();基于时间戳v1()生成uid,uuid.v4()随机生成uid,通常使用v1,v4还是有概率重复的
var clients = [];
 
//wsSend实现服务端广播客户端
function wsSend(type, client_uuid, nickname, message) {
    for (var i = 0; i < clients.length; i++) {//服务端会广播消息给多个客户端
        var clientSocket = clients[i].ws;
        if (clientSocket.readyState === WebSocket.OPEN) {//客户端websocket处于连接状态才会广播消息
            clientSocket.send(JSON.stringify({
                "type": type,
                "id": client_uuid,
                "nickname": nickname,
                "message": message
            }));
        }
    }
}
var clientIndex = 1;
wss.on('connection', function(ws) {//客户端open时,会触发服务端connection,服务端的消息会广播给多个客户端
    var client_uuid = uuid.v4();
    var nickname = "AnonymousUser" + clientIndex;
    clientIndex += 1;  //当服务一直开启的状态,如果刷新客户端页面,此时clientIndex会一直增加,此处可以优化,客户端刷新时nickname保持当前的状态
      
       //有客户端连接时,记录当前客户端的信息
    clients.push({ "id": client_uuid, "ws": ws, "nickname": nickname });
    console.log('client [%s] connected', client_uuid);
    var connect_message = nickname + " has connected";
       wsSend("notification", client_uuid, nickname, connect_message);
   
       //个人想法:功能1实现服务端定时发送消息
       /* setInterval(function(){ 
              wsSend("xixi",client_uuid,nickname,"xixi");
       },1000); */
      
       //个人想法:想法2消息单项发送
       //可以在发送消息或者连接成功之后发送消息给某个客户端
      
       //结合1 2 在服务端针对某个客户端单项发送消息,可增加触发某个条件取消定时器发送消息
//个人想法: 想法3 实现websocket断开连接重连
      
    console.log('client [%s] connected', client_uuid);
    ws.on('message', function(message) {
        if (message.indexOf('/nick') === 0) {//判断是什么消息类型,含有/nick表示修改昵称,不过通过'/nick'判断不算严谨,在发送消息的input框中输入"/nick haha hahah hha",会提示昵称修改
            var nickname_array = message.split(' ');
                     console.log(nickname_array.length);
            if (nickname_array.length >= 2) {
                var old_nickname = nickname;
                nickname = nickname_array[1];
                var nickname_message = "Client " + old_nickname + " changed to " + nickname;
                wsSend("nick_update", client_uuid, nickname, nickname_message);
            }
        } else {
            wsSend("message", client_uuid, nickname, message);
        }
    });
       //客户端失去连接,广播消息给其他客户端是哪个客户端失去了连接
   var closeSocket = function(customMessage) {
        for (var i = 0; i < clients.length; i++) {
            if (clients[i].id == client_uuid) {
                var disconnect_message;
                if (customMessage) {
                    disconnect_message = customMessage;
                } else {
                    disconnect_message = nickname + " has disconnected";
                }
                wsSend("notification", client_uuid, nickname, disconnect_message);
                clients.splice(i, 1);//在客户端列表中删除已经失效的客户端
            }
        }
    };
    ws.on('close', function () {
        closeSocket();
    });
    process.on('SIGINT', function () {//nodejs  捕获当前进程接收到的信号
        console.log("Closing things");
        closeSocket('Server has disconnected');
        process.exit();//退出当前进程
    });
});

 

新建client.html文件

<!Doctype html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>WebSocket Echo Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" />
       <style type="text/css">
              li h2{
                     font-size:20px;
              }
       </style>
    <script src="../js/jquery-1.12.3.min.js"></script>
    <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script>
        //建立连接
        var ws = new WebSocket("ws://localhost:8181");
        var nickname = "";
        ws.onopen = function (e) {
            console.log('Connection to server opened');
        }
        //页面显示
        function appendLog(type, nickname, message) {
            if (typeof message == "undefined") return;
            var messages = document.getElementById('messages');
            var messageElem = document.createElement("li");
            var preface_label;
            if (type === 'notification') {  //针对不同的消息类型,显示不同的状态
                preface_label = "<span class=\"label label-info\">*</span>";
            } else if (type == 'nick_update') {
                preface_label = "<span class=\"label label-warning\">*</span>";
            } else {
                preface_label = "<span class=\"label label-success\">"
                + nickname + "</span>";
            }
            var message_text = "<h2>" + preface_label + "&nbsp;&nbsp;"
            + message + "</h2>";
            messageElem.innerHTML = message_text;
            messages.appendChild(messageElem);
        }
        //收到消息处理
        ws.onmessage = function (e) {
            var data = JSON.parse(e.data);
            nickname = data.nickname;
            appendLog(data.type, data.nickname, data.message);
            console.log("ID: [%s] = %s", data.id, data.message);
        }
        ws.onclose = function (e) {
            appendLog("Connection closed");
            console.log("Connection closed");
        }
        //发送消息
        function sendMessage() {
            var messageField = document.getElementById('message');
            if (ws.readyState === WebSocket.OPEN) {
                ws.send(messageField.value);
            }
            messageField.value = '';
            messageField.focus();
        }
        //修改名称
        function changName() {
            var name = $("#name").val();
            if (ws.readyState === WebSocket.OPEN) {
                ws.send("/nick " + name);
            }
        }
 
        function disconnect() {
            ws.close();
        }
    </script>
</head>
 
<body >
    <div>
        <div>
            <ul id="messages"></ul>
            <hr/>
            <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">
                <div>
                    <input type="text" id="message" name="message"
                           placeholder="Type text to echo in here" value="" autofocus/>
                </div>
                <button type="button" id="send" class="btn btn-primary"
                        onclick="sendMessage();">
                    Send Message
                </button>
 
            </form>
            <div><span>nikename:</span><input id="name" type="text" /> <button class="btn btn-sm btn-info" onclick="changName();">change</button></div>
        </div>
    </div>
</body>
</html>

 

 

 


possitive(2) negative(0) views725 comments0
私信 收藏 分享
分享到

发送私信

最新评论

请先 登录 再评论.
相关文章
  • 3D感知和建模关键硬件技术:双目、3D结构光和TOF

    无论VR、AR和3D打印,其核心技术包含3D成像和建模。而3D建模属于劳动密集型的工作,耗时耗力,凡这类工作都会是被新技术革命的地方,自动3D建模技术就是为了解决...

  • 踏得网精选2016年度10大最佳HTML5动画

    踏得网精选2016年度最酷最新的HTML5动画集,评选标准为:创意新颖度+实现技术难度+趣味程度。使用一些在线H5生成工具的作品,因其主要使用图片和CSS3套路动画,...

  • 创建非矩形网页页面元素的常用技术和实例代码

    非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...

  • CSS3人行走动作图解和动画实现

    对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...

  • 函数式JavaScript编程基础概念:Curry和Partial Application

    本文介绍JS函数式编程中的两个概念:柯里(Curry)和部分应用程序(Partial Application)。什么是应用程序(Application)将函数应用于其参数以产生返回值的过...

  • 通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质

    常常听到人们对于HTML5的讨论,看了页面头部这个那个就是HTML5,误认为HTML5只是新增些标签“而已”,学完了

  • 学习使用CSS制作进度条

    进度条是基础的界面控件,可用于多种场合,比如任务完成进度,手机充电状态等。本文介绍一个简单实用的进度条制作方法。预期效果如下图所示:直观上,我们可以把该进度条控件分为2个部分,外部的边界用来表示固定的目标范围,里面的条形部分用来表示当前进度。外部目标范围元素的CSS代码编写如下:.pb-scope

  • Blender2.7 快捷键一览表

    通用操作
    停止当前操作:ESC
    快捷搜索:SPACE撤销:ctrl+z重做:ctrl+shift+z渲染:F12
    单选:鼠标右键(RMB)全选:A
    框选:B
    刷选:...

  • CSS3图片混合(Blend)效果及其参考计算公式一览表

    在Photoshop软件中,混合是将两个图层的色彩值进行合成,从而创造出大量的效果。在这些效果的背后实际是一些简单的数学公式在起作用。下面所介绍的公式仅适用于R...

  • 如何使用WebGL实现空气高温热变形动画特效

    我们在炎炎夏日,或者在火堆旁,经常会观察到热源周围空气的不稳定波动现象。本文将讲解如何通过WebGL来实现这个特效。该效果可用于热变形、波浪、水面波光等场...

  • 使用requestAnimationFrame和Canvas给按钮添加绕边动画

    要给按钮添加酷炫的绕边动画,可以使用Canvas来实现。基本的思路是创建一个和按钮大小相同的Canvas元素,内置在按钮元素中。然后在Canvas上实现边线环绕的动画。...

  • SVG过滤器feColorMatrix矩阵变换效果用法详解

    在计算机图形学(数学)中,矩阵乘法可用于把空间向量进行几何变换。我们可以把颜色的值(RGBA)表示成一个四维空间向量:color = (r, g, b, a);那么就可以应用...

  • 更多...