基于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. Idea的快捷键，瞎摸索，开心就好，哈哈哈

    前言:如果你有强迫症,换了一个编辑器,最痛苦莫过于快捷键,不顺手了.这里自己瞎摸索的快捷键,贴一下,这里主要以实际应用为主,因为大量介绍的网上已经很多很多,So基本的不再叙述. 分享一下比较不错的Id ...

  2. 标准C语言实现基于TCP/IP协议的文件传输

    TCP/IP编程实现远程文件传输在LUNIX中一般都采用套接字(socket)系统调用. 采用客户/服务器模式,其程序编写步骤如下:  1.Socket系统调用  为了进行网络I/O,服务器和客户机两 ...

  3. nginx 服务脚本编写模板

    编写nginx服务脚本:脚本内容如下: [root@www ~]# cat /etc/init.d/nginx #!/bin/bash # nginx Startup script for the N ...

  4. 【Android】jar包Proguard混淆方法

    本文章的前提条件是,读者已经掌握了正确导出jar包的技能. 1.拷贝Android项目中“proguard.cfg”文件到你指定的位置,并改名为“proguard.pro”,此步是为proguardg ...

  5. angularjs 中通过 $location 进行路由跳转传参

    $location.path('/page1').search({id: $scope.id,name:$scope.name}); 带参数跳转页面,在新的页面通过$routeParams接收参数 $ ...

  6. 远程连接mongodb服务器

  7. 【转】Java开发必须要知道的知识体系

    Java Java是一门超高人气编程语言,拥有跨平台.面向对象.泛型编程等特性.在TIOBE编程语言排行榜中,连续夺得第一宝座,而且国内各大知名互联网公司,后端开发首选语言:非Java莫属.今天只是梳 ...

  8. 020100——00002_OS库

    OS 库中文文档:https://yiyibooks.cn/xx/python_352/library/os.html OS 库英文文档:https://docs.python.org/3/libra ...

  9. Hive| ETL清洗& 查询练习

    ETL清洗数据 导Jar包 <dependencies> <dependency> <groupId>log4j</groupId> <artif ...

  10. 用 threading 写多线程服务器

    import socket import threading server = socket.socket() server.bind(("127.0.0.1",8899)) se ...