基于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. Tomcat延迟启动

    import subprocess as t import time, os, requests, sys WEB_IP = '127.0.0.1:8080' # WEB_IP = '127.0.0. ...

  2. 根据现有的XML文件生成其对应的实体类

    方法如下: 1.将完整的Xml文本复制一下, 2.在vs2013(或以上版本) .net4.5项目下建立一个类文件, 3.依次选择菜单:编辑->选择性粘贴->将XML粘贴为类.

  3. UE4 日志

    第一种 输出在控制台中,需要在启动之后的游戏窗口中点击~以打开控制台,然后输入showlog,这时候会弹出一个cmd日志窗口.在程序中使用代码 UE_LOG(LogTemp, Warning, TEX ...

  4. jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理

    jquery源码中noConflict(防止$和jQuery的命名冲突)的实现原理 最近在看jquery源码分析的视频教学,希望将视频中学到的知识用博客记录下来,更希望对有同样对jquery源码有困惑 ...

  5. 期货大赛项目|三,autofac简单用法

    autofac是依赖注入 我们以前要引入一个dal层,是这么写的 private IDal _dao = new Dal() 我们可以看得出,这样写,我们的bll层不光依赖了接口IDal,还依赖了Da ...

  6. python全栈开发day69-cookie、session

    一.ORM回顾 1. 内容回顾 1. Django中使用ORM连接MySQL的步骤: 1. 创建数据库 2. 告诉Django连接哪个数据库 在settings.py中设置数据库相关的链接信息 3. ...

  7. Python 携程

    一.协程 1.又称微线程,纤程.英文名Coroutine.一句话说明什么是协程:协程是一种用户态的轻量级线程(相当于操作系统不知道它的存在,是用户控制的). 2.协程拥有自己的寄存器上下文和栈(代码的 ...

  8. P1025 数的划分 dfs dp

    题目描述 将整数nn分成kk份,且每份不能为空,任意两个方案不相同(不考虑顺序). 例如:n=7n=7,k=3k=3,下面三种分法被认为是相同的. 1,1,51,1,5;1,5,11,5,1;5,1, ...

  9. Trident中的DRPC实现

    一:介绍 1.说明 Storm里面引入DRPC主要是利用storm的实时计算能力来并行化CPU intensive的计算.DRPC的storm topology以函数的参数流作为输入,而把这些函数调用 ...

  10. Shiro笔记(一)Shiro整体介绍

    介绍:是一个java的安全(权限)框架 可以完成的功能:认证登录(Authentication).授权(Authorization).加密(cryptography).会话管理(session man ...