基于WebSocket实现聊天室(Node)

WebSocket是基于TCP的长连接通信协议，服务端可以主动向前端传递数据，相比比AJAX轮询服务器，WebSocket采用监听的方式，减轻了服务器压力

本文作为学习websocket的练习，实现在线聊天的功能

服务端

server.js

const http = require('http')

const fs = require('fs')

const ws = require('ws')

// 创建服务

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

    res.writeHead(200, {'Content-Type': 'text/html;charset=utf8'})

    // 显示页面内容

    fs.readFile("index.html", function (err, data) {

        if (err)

            return console.error(err);

        res.end(data)

    });

}).listen(8000)

// 服务端定义web socket server

let wss = new ws.Server({server})

// 存放socket

let clientMap = {}

// 计数器

let count = 0

// 客户id

let id = 0

let d = new Date()

// 客户端连接服务端时，回调函数会接受一个socket对象

wss.on("connection", function (socket) {

    count ++;

    id ++;

    // 添加用户

    socket.id = id

    clientMap[id] = socket

    console.log("第" + count + "位用户上线了，ID为" +id)

    socket.send("欢迎来到聊天室，已经有"+count+"位用户在线")

    // 监听客户端数据

    socket.on("message", function (msg) {

        // 广播消息

        for(let id in clientMap){

            console.log(id)

            console.log(socket.id)

            if(id === socket.id.toString())

                clientMap[id].send(d.toLocaleTimeString() + " 我: "+ msg)

            else

                clientMap[id].send(d.toLocaleTimeString() + " " + socket.id +"号: "+ msg)

        }

    })

    // 监听客户下线

    socket.on("close", function (e) {

        // 删除用户

        count --;

        console.log(socket.id + "号用户"  + "下线")

        delete clientMap[socket.id]

    })

    // 错误连接

    socket.on("error", function (err) {

        console.log("客户连接错误" + err)

    })

})

客户端

index.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>

    <style>

        #room {

            border: solid;

            margin: 2px;

            width: 400px;

            height: 500px;

            overflow-y: scroll;

        }

    </style>

</head>

<body>

    <div id="room"></div>

    <input type="text" id="msg">

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

    <!--客户端脚本-->

    <script>

        // 定义web socket client

        let wsc = new WebSocket("ws://localhost:8000")

        let serverError = false

        let room = document.getElementById("room")

        let inputText = document.getElementById("msg")

        // 建立连接

        wsc.onopen = function (e) {

            console.log('成功进入聊天室')

        }

        // 获取后端消息

        wsc.onmessage = function (e) {

            room.innerHTML +='<p>'+e.data+'</p>'

        }

        // 关闭

        wsc.onclose = function (e) {

            alert("聊天室已经关闭")

            serverError = true

        }

        // 错误

        wsc.onerror = function () {

            console.log("连接错误")

        }

        // 发送信息

        sendMsg = function () {

            let s = inputText.value

            if (serverError) {

                alert("聊天室已经关闭")

            }

            else if (msg.value === "") {

    //            alert("发送内容不能为空")

            } else {

                wsc.send(s)

                inputText.value = ""

            }

        }

        // 注册发送信息的事件

        send.onclick = sendMsg

        document.onkeydown = function(evt){

            if(evt.code === "Enter")

                sendMsg()

        };

    </script>

</body>

</html>

运行结果

运行

$ node server.js

开启不同浏览器，或同一浏览器的多个tab，访问localhost:8000，就可以实习聊天功能

服务端输出：

$ study node server.js

第1位用户上线了，ID为1

第2位用户上线了，ID为2

第3位用户上线了，ID为3

3号用户下线

2号用户下线

1号用户下线

小结

感觉Websocket非常优雅，后端变得主动才好嘛~

基于WebSocket实现聊天室(Node)的更多相关文章

  1. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. 第一节：.Net版基于WebSocket的聊天室样例

    一. 说在前面的话 该篇文章为实时通讯系列的第一节,基于WebSocket编写了一个简易版聊天样例,主要作用是为引出后面SignalR系列的用法及其强大方便之处,通过这个样例与后续的SignalR对比 ...

  3. 基于webSocket的聊天室

    前言 不知大家在平时的需求中有没有遇到需要实时处理信息的情况,如站内信,订阅,聊天之类的.在这之前我们通常想到的方法一般都是采用轮训的方式每隔一定的时间向服务器发送请求从而获得最新的数据,但这样会浪费 ...

  4. [已解决][HTML5]基于WebSocket开发聊天室应用

    WebSocket示例java的比较少,大部分是nodejs的,比较有名的是socket.io的chat, 借用下他的前端实现一套java的,后端基于https://github.com/genera ...

  5. 关于websocket制作聊天室的的一些总结

    websocket的总结 在一个聊天室系统中,常常使用websocket作为通信的主要方式.参考地址:https://www.jianshu.com/p/00e... 关于自己的看法:websocke ...

  6. websocket+golang聊天室

    原文地址: http://www.niu12.com/article/3 websocket+golang聊天室 main.go和index.html放在同一目录下 main.go package m ...

  7. WebSocket 网页聊天室

    先给大家开一个原始的websocket的连接使用范例 <?php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是 ...

  8. 基于websocket vue 聊天demo 解决方案

    基于websocket vue 聊天demo 解决方案 demo 背景 电商后台管理的客服 相关技术 vuex axios vue websocket 聊天几种模型 一对一模型 一对一 消息只一个客户 ...

  9. 基于nodejs+webSocket的聊天室（实现：加入聊天室、退出聊天室、在线人数、在线列表、发送信息、接收信息）

    1  安装 socket.io模块 npm install "socket.io": "latest" 2 app.js相关 ws = require('soc ...

随机推荐

  1. 报错ERR_CONNECTION_REFUSED，如何解决（原创）

    当我访问我的一个后天地址的时候,突然出现了ERR_CONNECTION_REFUSED,但是之前是可以访问的. 我先ping了下这个网址,发现是OK的 然后我想可能是80端口有问题,也就是说可能是WE ...

  2. WCF 非http寄宿IIS

    摘要 从IIS 7 开始, IIS增加了对非HTTP协议的支持. 因此, 自IIS 7之后, 可以将NetTcpBinding等非HTTP协议的Bindings直接寄宿在IIS上面. 本文将介绍如何在 ...

  3. 3186Treats for the Cows（区间dp）

    题意:给一个数组v,每次可以取前面的或者后面的,第k次取的v[i]价值为v[i]*k,问总价值最大是多少. 区间dp. 区间dp可以不枚举len  直接枚举i和j即可  见代码 #include &l ...

  4. Count the string kmp

    问题描述众所周知,aekdycoin擅长字符串问题和数论问题.当给定一个字符串s时,我们可以写下该字符串的所有非空前缀.例如:S:“ABAB”前缀是:“A”.“AB”.“ABA”.“ABAB”对于每个 ...

  5. .net面试问答

    转载自:https://www.cnblogs.com/dingfangbo/p/5768991.html .net面试问答(大汇总)   原文://http://blog.csdn.net/weny ...

  6. scrapy response.xpath可以提取包含字符XX的标签

    1. 筛选属性包含某字符串的标签(如id = 'bigbaong'   查询包含'big'字符的就可以筛选到) res = response.xpath("//a[contains(@id, ...

  7. box-shadow阴影 三面显示

    想弄个只显示三面的阴影效果,网上一搜没有解决根本问题,最后还是在css3演示里面找到方法http://www.css88.com/tool/css3Preview/Box-Shadow.html 我把 ...

  8. Java中位运算符的使用

    先预知识: 数据在计算机中是以二进制的形式进行存储的,而二进制在内存中是以补码的形式进行存储的.在介绍位运算之前,首先来看一下原码.反码和补码的概念.由于正数的原码.反码和补码的形式都是一样的,所以以 ...

  9. Django 学习第三天——模板变量及模板过滤器

    一.模板路径的查找: 查找顺序:(现在哪找到就用那个) 首先在主目录的 setting.py 文件里的 TEMPLATES 中的 DIRS 里找: 其次如果 DIRS 中的 APP_DIRS : 'T ...

  10. 自己总结的C#编码规范--1.命名约定篇

    命名约定 我们在命名标识符时(包括参数,常量,变量),应使用单词的首字母大小写来区分一个标识符中的多个单词,如UserName. PascalCasing PascalCasing包含一到多个单词,每 ...