基于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. Ubuntu强制重启后提示emergency mode

    起因 win10+Ubuntu16.04双系统,在ubuntu下训练一个卷积网但是显存拙计卡死了,于是手贱强制按下电源开关重启. 现象 重启后从grub进ubuntu,并不进图形化的登录界面,而是提示 ...

  2. C#Enum用Tuple保存值绑定到前端的CheckBox

    //把数字转成枚举 public static T[] NumStringsToEnums<T>(string enumNumString ) //where T:Enum { if (s ...

  3. 执行shell文件是，提示chmod: 更改'./shell1.sh' 的权限: 不允许的操作。

  4. ThreadLocal详解，ThreadLocal源码分析，ThreadLocal图解

    本文脉路: 概念阐释 ---->  原理图解  ------> 源码分析 ------>  思路整理  ----> 其他补充. 一.概念阐述. ThreadLocal 是一个为 ...

  5. 【Codeforces】Gym100633 D. LWDB

    题解 点分治,然后每个点上挂着一个距离不超过\(a_{i}\)的颜色改成\(c\) 用一个单调栈维护距离单调递减,每次查询在每个包括这个点的分治中心的单调栈上二分,找到修改最靠前的颜色作为这个点的颜色 ...

  6. JMeter高并发场景下存在请求无数据

  7. net core体系-web应用程序-4net core2.0大白话带你入门-2asp.net core新建项目

    新建asp.net core项目   开发环境:Windows Server R2 2008 开发工具:Microsoft Visual Studio 2017 新建asp.net core项目 创建 ...

  8. Codeforces 781E Andryusha and Nervous Barriers 线段树 单调栈

    原文链接https://www.cnblogs.com/zhouzhendong/p/CF781E.html 题目传送门 - CF781E 题意 有一个矩形,宽为 w ,高为 h .一开始会有 w 个 ...

  9. HDU5117 Fluorescent 期望 计数 状压dp 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/HDU5117.html 题目传送门 - HDU5117 题意 $T$ 组数据. 给你 $n$ 盏灯 ,$m$ 个 ...

  10. 在cron运行hive时，无法打出mapreduce日志

    本身我是这么运行的: 15 1 * * * /data/xx/shells/run.sh >> /data/xx/log/joblog/job.log 发现job.log中,没有打出hiv ...