WebSocket实现web即时通信

一、首先看一下，HTTP、ajax轮询、long poll和WebSocket的区别：

1、HTTP 协议（短连接）：一个 Request 一个 Response。缺陷：通信只能由客户端发起。
--------------------------------------------------------------------------------
2、ajax轮询：
ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）
--------------------------------------------------------------------------------
3、long poll：原理跟ajax轮询差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。基于事件的触发，一个事件接一个事件。long poll需要很高的并发，体现了同时容纳请求的能力。
--------------------------------------------------------------------------------
4、WebSocket：是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。WebSocket的优势在于他的高实时性，以及传输过程中的低的资源消耗！
握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。Websocket的数据传输是frame形式传输的。
WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
其他特点包括：
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

关于WebSocket的更多介绍可以参考
阮一峰——WebSocket 教程http://www.ruanyifeng.com/blog/2017/05/websocket.html

===============================================================================
二、通过nodejs和javascript实现一个网页聊天室

（参考：博客https://blog.csdn.net/u010136741/article/details/51612594?utm_source=copy；作者：柳木木_kylin ）
主要包括，聊天，改用户名，查看其他用户在线状态的功能。
大致流程为，用户访问网页，即进入聊天状态，成为新游客，通过底部的输入框，可以输入自己想说的话，点击发布，信息呈现给所有在聊天的人的页面。用户可以实时修改自己的昵称，用户离线上线都会实时广播给其他用户！
javascript 部分，连接websocket成功之后，主要是监听数据返回，和发送数据。
当用户编辑好内容，点击发送按钮是调用sendMessage方法，发送数据，如果需要修改昵称，则发送数据格式为"/nick 昵称"。
当服务器返回数据到客户端，我们通过appendLog方法对数据做处理，根据type字段，判断是显示用户离线在线信息，还是显示聊天信息。最后更新在线人数。

服务器端：WebSocket_chart_server.js

var WebSocket = require('ws');

var WebSocketServer = WebSocket.Server,

    wss = new WebSocketServer({port: 8180});

var uuid = require('node-uuid');

var clients = [];

function wsSend(type, client_uuid, nickname, message,clientcount) {

  for(var i=0; i<clients.length; i++) {

    var clientSocket = clients[i].ws;

    if(clientSocket.readyState === WebSocket.OPEN) {

      clientSocket.send(JSON.stringify({

        "type": type,

        "id": client_uuid,

        "nickname": nickname,

        "message": message,

        "clientcount":clientcount,

      }));

    }

  }

}

var clientIndex = 1;

wss.on('connection', function(ws) {

  var client_uuid = uuid.v4();

  var nickname = "游客"+clientIndex;

  clientIndex+=1;

  clients.push({"id": client_uuid, "ws": ws, "nickname": nickname});

  console.log('client [%s] connected', client_uuid);

  var connect_message = nickname + " 来了";

  wsSend("notification", client_uuid, nickname, connect_message,clients.length);

  ws.on('message', function(message) {

    if(message.indexOf('/nick') === 0) {

      var nickname_array = message.split(' ');

      if(nickname_array.length >= 2) {

        var old_nickname = nickname;

        nickname = nickname_array[1];

        var nickname_message = "用户 " + old_nickname + " 改名为： " + nickname;

        wsSend("nick_update", client_uuid, nickname, nickname_message,clients.length);

      }

    } else {

      wsSend("message", client_uuid, nickname, message,clients.length);

    }

  });

  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 + " 走了";

            }

          clients.splice(i, 1);

          wsSend("notification", client_uuid, nickname, disconnect_message,clients.length);

        }

    }

  }

  ws.on('close', function() {

      closeSocket();

  });

  process.on('SIGINT', function() {

      console.log("Closing things");

      closeSocket('Server has disconnected');

      process.exit();

  });

});

web端：WebSocket_chart_web.html

<!DOCTYPE html>

<html lang="cn">

<head>

    <title>WebSocket chart application</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.css">

    <link rel="stylesheet" href="http://cdn.bootcss.com/tether/1.3.2/css/tether.css"/>

    <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js" ></script>

    <script src="http://cdn.bootcss.com/tether/1.3.2/js/tether.js"></script>

    <script src="http://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.js"></script>

    <script>

        var ws= new WebSocket('ws://localhost:8180');

        var nickname;

        ws.onopen = function(e){

            console.log('Connection to server opened');

        }

          function appendLog(type,nickname, message,clientcount) {

                  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 + "  " + message + "</h2>";

                  messageElem.innerHTML = message_text;

                  messages.appendChild(messageElem);

            var count_people = document.getElementById("count_people");

                        count_people.innerHTML = clientcount;

            }

        ws.onmessage = function(e){

            var data = JSON.parse(e.data);

            nickname = data.nickname;

                  appendLog(data.type,data.nickname, data.message,data.clientcount);

                console.log("ID: [%s] = %s", data.id, data.message);

        }

        function sendMessage(){

            var message = $('#message').val().trim();

            if(message.length<1){

                alert("不能发送空内容！");

                return;

            }

            ws.send($('#message').val());

            $('#message').val("");

            $('#message').focus();

            console.log(ws.bufferedAmount);

        }

    </script>

</head>

<body lang="cn">

    <div class="vertical-center">

    <div class="container">

        <h2>多人在线聊天DEMO</h2>

    <hr />

    <p>当前在线人数：<span id="count_people">0</span></p>

     <ul id="messages" class="list-unstyled">

        </ul>

        <hr />

       <form role="form" id="chat_form" onsubmit="sendMessage(); return false;">

            <div class="form-group">

                <input class="form-control" type="text" name="message" id="message"

                      placeholder="输入聊天内容" value="" autofocus/>

            </div>

               <button type="button" id="send" class="btn btn-primary"

          onclick="sendMessage();">发送!</button>

    </form>

    </div>

    </div>

</body>

</html>

WebSocket实现web即时通信(后端nodejs实现)的更多相关文章

  1. WEB即时通信

    问题 传统的浏览器通信方式:基于HTTP协议的请求/响应模式. 早期:通过刷新浏览器来更新服务器端的数据 后来Ajax(XMLHttpRequest是核心):可以不用刷新浏览器更新服务器端数据.但是这 ...

  2. 基于Server-Sent Event的简单聊天室　Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  3. .NET实现WebSocket服务端即时通信实例

    即时通信常用手段 1.第三方平台 谷歌.腾讯 环信等多如牛毛,其中谷歌即时通信是免费的,但免费就是免费的并不好用.其他的一些第三方一般收费的,使用要则限流(1s/限制x条消息)要么则限制用户数. 但稳 ...

  4. WebSocket实现Web端即时通信

    前言 WebSocket 是HTML5开始提供的一种在浏览器和服务器间进行全双工通信的协议.目前很多没有使用WebSocket进行客户端服务端实时通信的web应用,大多使用设置规则时间的轮询,或者使用 ...

  5. 即时通信WebSocket 和Socket.IO

    WebSocket HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯. 在2008年诞生,2011年成为国际标准. 现在基本所有浏览器都已经支持了. We ...

  6. .NET 即时通信，WebSocket服务端实例

    即时通信常用手段 1.第三方平台 谷歌.腾讯 环信等多如牛毛,其中谷歌即时通信是免费的,但免费就是免费的并不好用.其他的一些第三方一般收费的,使用要则限流(1s/限制x条消息)要么则限制用户数. 但稳 ...

  7. .NET 即时通信，WebSocket

    .NET 即时通信,WebSocket 即时通信常用手段 1.第三方平台 谷歌.腾讯 环信等多如牛毛,其中谷歌即时通信是免费的,但免费就是免费的并不好用.其他的一些第三方一般收费的,使用要则限流(1s ...

  8. 基于Nodejs开发的web即时聊天工具

    由于公司需要开发web即时聊天的功能,开始时我们主要的实施方法是用jquery的ajax定时(10秒)轮询向服务器请求,由于是轮询请求,对 服务器的压力比较大.我们网站上线的时间不长,访问量不是很大, ...

  9. Node.js+websocket+mongodb实现即时聊天室

    ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...

随机推荐

  1. Bash数组

    1. 数组申明 declare -a array 2. 数组赋值 #法1 array=(var1 var2 var3 ... varN) #法2 array=([]=var1 []=var2 []=v ...

  2. PyCharm引入python需要使用的包

    在学习python的时候,被推荐了使用PyCharm这款IDE,但是在import包的时候却发生了问题- -无法找到相应的包,但是明明通过pip安装成功了 在这款IDE中,要导入包,需要手动进行引入 ...

  3. 图片按日期分类和查看程序（WPF开发）(附源码)

    手机方便了我们的生活,可以随时随地拍摄.越来越多的图片堆砌在电脑里.看到杂乱无章的图片,实在感到头痛.手动整理太复杂.基于此,我写了一个小程序,可以将图片按日期整理和查看.按日期查看图片,回忆过去的点 ...

  4. Unity3D中的常用方法

    备注:文中所使用的this均指脚本所依附的对象 1.移动(用Translate方法进行移动) ; //移动速度 this.transform.Translate(Vector3.down * Time ...

  5. 代理模式——java设计模式

    代理模式(Proxy Pattern) GoF中给出的代理模式的定义为: 代理模式给某一个对象提供一个代理或占位符,并由代理对象来控制对原对象的访问. 代理模式的英文叫做Proxy或Surrogate ...

  6. iOS自动布局——Masonry详解

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂新鲜事儿发表于云+社区专栏 作者:oceanlong | 腾讯 移动客户端开发工程师 前言 UI布局是整个前端体系里不可或缺的一环 ...

  7. springMVC和json整合配置方法

    一.配置方法一 1.导入第三方的jackson包,jackson-mapper-asl-1.9.13.jar和jackson-core-asl-1.9.13.jar 百度云链接:https://pan ...

  8. （win10）Wamp环境下php升级至PHP7.2

    (win10)Wamp环境下php升级至PHP7.2 ①下载php7.2到本地 链接:https://pan.baidu.com/s/16jqmF7GR_CRklHPAZ9VRrg 密码:4ob4 ② ...

  9. js设计模式总结3

    1.模板方法模式 模板方法就是将多个模型抽象化归一,从中取出一个最基本的模板,当然这个模板可以作为实体对象也可以作为抽象对象,看你具体需求,其他模块只需要继承这个模块方法,也可以扩展这个方法. 举例子 ...

  10. JSON & Ajax

    Ajax是异步JavaScript和XML是用来在客户端作为一组相互关联的Web开发技术,以创建异步Web应用程序. Ajax模型,Web应用程序可以发送数据和检索数据从一个服务器,而不干扰现有的页面 ...