前言

在详解 HTTP系列之一讲到HTTP/2.0 突破了传统的“请求-问答模式”这一局限，实现了服务器主动向客户端传送数据。而本章将通过一种在单个TCP连接上进行全双工通信的协议--websocket协议，实现一个简单的聊天室（本文转载自xing.org1^大佬的博客，详情请点击此处跳转）




核心要点

聊天室的核心要点是由服务器向每个正在连接的用户发送消息，也就是上面讲到的改变。如果不是这样，只能是客户端以一个很短的时间间隔向服务端请求数据。

要做到广播，就需要server.connections，这个数组记录了所有连接到websocket服务器的用户（也就是进入聊天室的人），通过遍历这个数组，然后给数组中每个连接进来的用户对象发送消息即可。

实现这一功能的代码如下：

const ws = require('nodejs-websocket');

const server = ws.createServer((connect)=>{

	/*

		......

	*/

	// 对连接到服务端的每个对象发送数据

	function broadcast(jsonStr){

		server.connections.forEach((element)=>{

		//切记，send参数必须是字符串类型，所以这里将对象字符串化

    	element.send(JSON.stringify(jsonStr));

  });

	}

})

 

 

聊天室实现代码

环境：

  • nodejs
  • npm install nodejs-websocket

 

客户端 test.html:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

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

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>小石头的群聊</title>

</head>

<body>

  <div class="container">

    <input type="text" placeholder="请输入要发送的内容" id="ipt">

    <button id="btn">发送</button>

    <button id="closeBtn">退出群聊</button>

    <p>

      群聊内容如下：

    </p>

    <div id="rst" style="width: 800px;height: 500px;background-color: greenyellow;"></div>

  </div>

  <script>

    // 聊天室功能

    const ws = new WebSocket('ws://localhost:8081'),

      ipt = document.getElementById('ipt'),

      btn = document.getElementById('btn'),

      closeBtn = document.getElementById('closeBtn'),

      content = document.getElementById('rst');

    // 初次进入聊天室，给个提醒

    ws.addEventListener('open', (e) => {

      console.log('加入聊天室成功', e);

      content.appendChild(creatEle('您已成功加入小石头的群聊~'));		//

      // 聊天区滚动到底

      goBottom();

    });

    // 接收ws服务器发送的消息，并展示到div#rst当中

    ws.addEventListener('message', (e) => {

      console.log(e.data);

      content.appendChild(creatEle(e.data));

      goBottom();

    });

    // 一个带滚动条的DIV元素,怎么让它的滚动条位置默认保持在最底部?

    function goBottom() {

      content.scrollTop = content.scrollHeight;

    }

    // btn被点击时发送请求

    btn.onclick = function () {

      btnClickEvent();

    }

    ipt.addEventListener('keydown', (e) => {

      if (e.keyCode === 13) {

        btnClickEvent();

      }

    });

    // close-btn被点击时退出群聊

    closeBtn.onclick = function () {

      ws.close();

    }

    // 创建一个p标签，存储对应内容，以追加到内容展示区域

    function creatEle(str) {

      console.log(str.indexOf('{'));

      const TYPE_LEAVE = 0; //leave,离开

      const TYPE_ENTRY = 1; //entry,进入

      const TYPE_SPEAK = 2; //speak,发言

      const eleP = document.createElement('p');

      if (str.indexOf('{') == 0) {

        let parseStr = JSON.parse(str);

        eleP.innerHTML = `<span class="timer">${parseStr.time}</span><br/><span class="msg">${parseStr.msg}</span>`;

        switch (parseStr.type) {

          case TYPE_LEAVE:

            eleP.className = 'leave';

            break;

          case TYPE_ENTRY:

            eleP.className = 'entry';

            break;

          case TYPE_SPEAK:

            eleP.className = 'speek';

            break;

          default:

            eleP.className = 'default';

            break;

        }

      } else {

        eleP.innerText = str;

      }

      return eleP;

    }

    // 添加回车发送消息事件

    function btnClickEvent() {

      if (ipt.value.length <= 0) {

        alert('不能发送空消息');

        return;

      }

      ws.send(ipt.value);

      ipt.value = '';

    }

  </script>

</body>

</html>

 

服务端 server.js:

/*

 * @Author: @Guojufeng

 * @Date: 2019-06-02 19:42:06

 * @Last Modified by: @Guojufeng

 * @Last Modified time: 2019-06-02 21:39:56

 * 优化 - 加入消息类型和当前时间的响应

 */

const ws = require('nodejs-websocket');

const POST = 8081;

let count = 0;//记录加入人数

const TYPE_LEAVE  = 0;//leave,离开

const TYPE_ENTRY  = 1;//entry,进入

const TYPE_SPEAK  = 2;//speak,发言

const server = ws.createServer((connect)=>{

  count++;// 有人加入，计数加一

  connect.userName = `用户${count}`;//connet是一个对象，新增一个属性用以标记该用户的名字（标识）

  // 1、通知所有人，connect用户加入群聊

  broadcast({

    type: TYPE_ENTRY,

    msg: `${connect.userName}加入群聊。`

  });

  // 2、通知所有人，connect用户发言

  connect.on('text',(rst)=>{

    broadcast({

      type: TYPE_SPEAK,

      msg: `${connect.userName}: ${rst}`

    });

  });

  // 3、通知所有人，connect用户退出群聊

  connect.on('close',(code,reason)=>{//个人认为利用code和reason这里，还可以模拟微信群聊中，用户被群主踢出群的情况

    broadcast({

      type: TYPE_LEAVE,

      msg: `${connect.userName}退出了群聊。`

    });

    count--;// 有人退出，计数减一

  });

  // error事件

  connect.on('error',()=>{

    console.log('发生异常');

  })

});

// 广播功能代码

function broadcast(cont){

  // 利用connections是存放所有加入群聊用户的数组，来给所有人广播内容

  let sendCont = {

    type: cont.type,

    msg: cont.msg,

    time: new Date().toLocaleTimeString()

  };

  server.connections.forEach((element)=>{

    element.send(JSON.stringify(sendCont));//切记，send参数必须是字符串类型，所以这里将对象字符串化

  });

}

server.listen(POST,()=>{

  console.log(`${POST}服务器启动成功。`)

});

启动服务：

  1. nodejs执行server.js文件，并成功监听到对应端口
  2. 浏览器打开index.html（可开启多个页面模拟多个用户），进行测试




结语

无


时间：2020/08/16 11:10

坐标：广东深圳


小案例-WebSocket实现简易聊天室的更多相关文章

  1. 基于Node.js + WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  2. node.js+websocket实现简易聊天室

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) websocket提供了一种全双工客户端服务器的异步通信方法,这种通信方法使用ws或者wss协议,可 ...

  3. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  4. node+websocket创建简易聊天室

    关于websocket的介绍太多,在这就不一一介绍了,本文主要实现通过websocket创建一个简易聊天室,就是90年代那种聊天室 服务端 1.安装ws模块,uuid模块,ws是websocket模块 ...

  5. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  6. WebSocket实现简易聊天室

    前台页面: <html> <head> <meta http-equiv="Content-Type" content="text/html ...

  7. 基于WebSocket的简易聊天室

    用的是Flash + WebSocket 哦~ Flask 之 WebSocket 一.项目结构: 二.导入模块 pip3 install gevent-websocket 三.先来看一个一对一聊天的 ...

  8. Java WebSocket实现简易聊天室

    一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是“孔”或“插座”,作为UNI ...

  9. Servlet WebSocket的简易聊天室

    添加依赖 <!-- websocket --> <dependency> <groupId>javax.websocket</groupId> < ...

随机推荐

  1. 4.28 省选模拟赛模拟赛 最佳农场 二维卷积 NTT

    第一次遇到二维卷积 不太清楚是怎么做的. 40分暴力比对即可. 对于行为或者列为1时 容易想到NTT做快速匹配.然后找答案即可. 考虑这是一个二维的比对过程. 设\(f_{i,j}\)表示以i,j为右 ...

  2. Idea Live Temlpates 自定义代码

    Idea Live Temlpates 自定义代码 目的 - 加快常用代码的书写 使用## 打开Settings 快捷键Ctrl+Alt+S 选中Live Templates 选中temlpates ...

  3. Node.js异步IO原理剖析

    为什么要异步I/O? 从用户体验角度讲,异步IO可以消除UI阻塞,快速响应资源 JavaScript是单线程的,它与UI渲染共用一个线程.所以在JavaScript执行的时候,UI渲染将处于停顿的状态 ...

  4. h5css产品模块设计

      <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF ...

  5. Linux(Centos 7)下安装Git并配置连接GitHub

    1.安装git  Centos7 查看git --version 2.配置用户名密码 git config --global user.name "xxx" git config ...

  6. nvcc fatal : Path to libdevice library not specified

    安装完成后,配置环境变量,在home下的.bashrc中加入 export LD_LIBRARY_PATH=/usr/local/cuda/lib64:$LD_LIBRARY_PATH export ...

  7. Dubbo系列之 （二）Registry注册中心-注册（2）

    引导 本章主要介绍下AbstractRegistry.FailbackRegistry的作用和源码. AbstractRegistry 首先,直接引出这个类的作用,该类主要把服务提供者信息缓存本地文件 ...

  8. Mybatis-03-日志

    日志 1 日志工厂 如果一个数据库操作,出现了异常,需要排错,此时需要日志. 曾经:sout debug 现在:日志工厂 logImpl SLF4J/log4j(掌握)/log4j2 设置中可以设定日 ...

  9. 解决 Could not resolve type alias 'com.deppon.gis.module.job.server.util.SdoGeometryTypeHandler'. 的办法

    单元测试提示下面错误: 核心错误: Failed to parse mapping resource: 'file [D:\490993\安装程序\DPAP2.1\dpap_v2.0.1\dpap_v ...

  10. Java并发编程(07)：Fork/Join框架机制详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.Fork/Join框架 Java提供Fork/Join框架用于并行执行任务,核心的思想就是将一个大任务切分成多个小任务,然后汇总每个小任务 ...