通过B/S架构实现多人聊天，客户端连接服务器，发送信息，服务器接收信息之后返回给客户端。

主要是通过socket.io实现浏览器和服务器之间进行实时，双向和基于事件的通信。

socket.io官方文档：https://socket.io/docs/

  • 新建一个文件夹作为项目文件夹

  • 新建一个js文件作为服务器，新建一个HTML文件作为客户端。

  • 建立服务器，使用http模块的createSrever快速创建一个服务，监听端口为3000；

 let http = require("http");

  let server = http.createServer((req, res) => {

     res.end("<h1>server starting!</h1>")

 });

 ​

 server.listen(3000, () => {

     console.log("listening on *:3000");

 });

  • 在项目根目录打开终端运服务器，提示端口服务器已经在3000端口开启。

　　

  • 在浏览器中打开本地3000端口地址

　　

  • 在项目文件夹根目录终端使用npm下载安装socket.io模块

npm i socket.io

  • 下载好后引用模块

let ws = require("socket.io");

let io = ws(server);

  • 监听客户端连接服务器情况，进行收发信息处理

io.on('connection', client => {

    let socketId = client.id; //  获取客户端的ID

    let clientIp = client.request.connection.remoteAddress; //  获取客户端的地址

    let address = client.handshake.address; //  获取客户端的地址

    console.log(address + " connected");

​

    //  监听客户端发送的信息

    client.on('message', msg => {

        console.log(address + ": " + msg);

        //  向所有客户端发送信息

        io.emit("message", msg);

    })

})

  • 建立客户端

  • 服务器返回一个网页，用于客户端输入发送信息

<div class="chat-box" id="chatbox">

    <input type="" name="" id="message" placeholder="Send STH...">

</div>

  • 引入socket.io

<script src="/socket.io/socket.io.js"></script>

  • 绑定回车事件，按回车发送信息，并显示在网页中

<script>

    let message = document.getElementById("message");

    let client = io.connect("/"); // 连接服务器

​

    document.onkeydown = function(event) { // 绑定键盘按键事件

        var e = event || window.event || arguments.callee.caller.arguments[0];

​

        if(e&&e.keyCode === 13) { // Enter键的代码是13

            let val = message.value;

            if(!val) return;

            client.send(val); // 向服务器发送输入框内容

​

            message.value = ""; // 清空输入框

        }

    }

​

    // 监听服务器发送的消息，将接收到的消息显示在网页上

    client.on("message", data => {

        let p = document.createElement('p');

        p.innerHTML = data;

        document.body.appendChild(p);

    })

​

​

</script>

  • 回到服务器

  • 引入fs模块，将页面作为响应返回前端

let server = http.createServer((req, res) => {

    let html = fs.readFileSync("./index.html");

    res.end(html)

});

  • 启动服务器，在浏览器中访问

　　　

  • 显示一个用户已经连接

　　

  • 测试

　　

附录

server.js

let http = require("http");

let ws = require("socket.io");

let fs = require("fs");

let server = http.createServer((req, res) => {

    let html = fs.readFileSync("./index.html");

    res.end(html);

});

let io = ws(server);

io.on('connection', client => {

    let socketId = client.id; //  获取客户端的ID

    let clientIp = client.request.connection.remoteAddress; //  获取客户端的地址

    let address = client.handshake.address; //  获取客户端的地址

    console.log(address + " connected");

    client.on('message', msg => {

        console.log(address + ": " + msg);

        io.emit("message", msg);

    })

})

server.listen(3000, () => {

    console.log("listening on *:3000");

});

index.html

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

    <div class="chat-box" id="chatbox">

        <input type="" name="" id="message" placeholder="Send STH...">

    </div>

<script src="/socket.io/socket.io.js"></script>

<script>

    let message = document.getElementById("message");

    let client = io.connect("/");

    document.onkeydown = function(event) {

        var e = event || window.event || arguments.callee.caller.arguments[0];

        if(e&&e.keyCode === 13) {

            let val = message.value;

            if(!val) return;

            client.send(val);

            message.value = "";

        }

    }

    client.on("message", data => {

        let p = document.createElement('p');

        p.innerHTML = data;

        document.body.appendChild(p);

    })

</script>

</body>

</html>

使用node.js实现多人聊天室（socket.io、B/S）的更多相关文章

  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. 利用socket.io实现多人聊天室(基于Nodejs)

    socket.io简单介绍 在Html5中存在着这种一个新特性.引入了websocket,关于websocket的内部实现原理能够看这篇文章.这篇文章讲述了websocket无到有,依据协议,分析数据 ...

  4. Spring整合DWR comet 实现无刷新 多人聊天室

    用dwr的comet(推)来实现简单的无刷新多人聊天室,comet是长连接的一种.通常我们要实现无刷新,一般会使用到Ajax.Ajax 应用程序可以使用两种基本的方法解决这一问题:一种方法是浏览器每隔 ...

  5. Asp.net MVC + Signalr 实现多人聊天室

    Asp.net SignalR 简介: 首先简单介绍一下Signalr ,我也是刚接触,觉得挺好玩的,然后写了一个多人聊天室. Asp.net SignalR 是为Asp.net 开发人员提供的一个库 ...

  6. Apache MiNa 实现多人聊天室

    Apache MiNa 实现多人聊天室 开发环境: System:Windows JavaSDK:1.6 IDE:eclipse.MyEclipse 6.6 开发依赖库: Jdk1.4+.mina-c ...

  7. 与众不同 windows phone (31) - Communication（通信）之基于 Socket UDP 开发一个多人聊天室

    原文:与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...

  8. 与众不同 windows phone (30) - Communication（通信）之基于 Socket TCP 开发一个多人聊天室

    原文:与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...

  9. 多人聊天室（Java）

    第1部分 TCP和UDP TCP:是一种可靠地传输协议,是把消息按一个个小包传递并确认消息接收成功和正确才发送下一个包,速度相对于UDP慢,但是信息准确安全:常用于一般不要求速度和需要准确发送消息的场 ...

随机推荐

  1. HTML之<meta>标签全解

      一.定义 元素可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词等等. 标签位于文档的头部<head></head>标签内 ...

  2. jQuery图片剪裁插件Cropper.js的使用

    插件下载地址及文档说明 1.引入必要的js和css核心文件 <link rel="stylesheet" href="../css/cropper.css" ...

  3. Win10激活工具 —— HWIDGen的使用方法

    一:引言 众所周知,Windows系统在安装完成之后,第一步就是激活系统,网上的一些激活方法大多数都是KMS激活,激活持续时间为半年. 因此,我找到了一个可以永久激活的工具:HWIDGen,它可以数字 ...

  4. 《深入理解Java虚拟机》读书笔记九

    第十章 早期(编译期)优化 1.Javac的源码与调试 编译期的分类: 前端编译期:把*.java文件转换为*.class文件的过程.例如sun的javac.eclipseJDT中的增量编译器. JI ...

  5. 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记（8.8）-- Reservations

    8.8 Reservations 预订 NVMe的reservation预订功能,用于让两个或多个主机能够协调配合的访问共享namespace.使用这些功能的协议和方式超出了本规格说明书的范围.对这些 ...

  6. mysql cmd链接不上数据库情况汇总

    在我的电脑 属性 高级设置 环境变量 path 编辑 添加mysql bin的文件位置复制粘贴上 mysql> use mysqlERROR 1044 (42000): Access denie ...

  7. 每天一个linux命令--ssh的host配置用户名密码

    1.在终端输入 cd ~/.ssh/ vi config 输入服务器的用户名和密码 souche@kickseed:~/.ssh$ cat config # 这是跳板机的配置,给跳板机的 IP 起个别 ...

  8. 简单了解一个WSDL,SOAP的格式

    简单了解一个WSDL,SOAP的格式 2016-06-20 09:34:43 树先生i 阅读数 5187  收藏 更多 分类专栏: WebService   版权声明:本文为博主原创文章,遵循CC 4 ...

  9. Python - 安装 - 在 Alpine Linux 下安装 Python2

    概述 在 Alpine Liunx 下安装 python2 感觉又是水了一发... 感觉还是有点丢人, 就像在帮小学生写作业, 写完了后还想找人夸我... 最近看 docker 和 jenkins, ...

  10. 每日扫盲：eclipse快捷键 包括查找类、方法、变量汇总

    [Ct rl+T] 搜索当前接口的实现类 1. [ALT +/]    此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ ...