<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>1</title>

    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <style>

        .user{

            color:lightskyblue;

            cursor: pointer;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="row">

        <div class="col-md-9">

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4 class="text-center">欢迎来老王聊天室</h4>

                </div>

                <div class="panel-body">

                    <ul class="list-group" id="messageUl">

                    </ul>

                </div>

                <div class="panel-footer">

                    <div class="row">

                        <div class="col-md-10">

                            <input id="txtMsg" class="form-control" type="text" onkeydown="handleKeyDown(event)">

                        </div>

                        <div class="col-md-2">

                            <button class="btn btn-default" onclick="send()">发送

                                <span class="glyphicon glyphicon-send"></span>

                            </button>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <div class="col-md-3">

            <div class="panel panel-default">

                <div class="panel-heading">

                    <h4>在线用户</h4>

                </div>

                <div class="panel-body">

                    <ul class="list-group" id="userUl"></ul>

                </div>

                <div class="panel-footer">

                    <h4 id="onlineUsers">在线人数 0</h4>

                </div>

            </div>

        </div>

    </div>

</div>

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

<script>

    let txtMsg = document.querySelector('#txtMsg');

    let onlineUsers = document.querySelector('#onlineUsers');

    //此脚本会在window上增加一个io的属性

    //http://localhost:8080/=/=空

    let socket = io();

    //当客户端连接服务器成功之后,向后台发送一个消息，问一下现在有哪些在线用户

    socket.on('connect',function(){

        socket.emit('users');

    });

    let messageUl = document.querySelector('#messageUl');

    let userUl = document.querySelector('#userUl');

    //监听服务器发过来的消息

    socket.on('message',function(msgObj){

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

        li.className = 'list-group-item';

        li.innerHTML = `${msgObj.username}:${msgObj.content} <span class="pull-right">${new Date(msgObj.createAt).toLocaleString()}</span>`;

        messageUl.appendChild(li);

    });

    socket.on('userList',function(userList){

        userUl.innerHTML =  userList.map(item=>(

            `<li class="list-group-item">${item}</li>`

        )).join('');

        countUser();

    });

    socket.on('user-added',function(username){

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

        li.className = 'list-group-item';

        li.innerHTML = `<span class="user">${username}</span>`;

        userUl.appendChild(li);

        countUser();

    });

    function countUser(){

        onlineUsers.innerHTML = `在线人数 ${userUl.children.length}`;

    }

    //发送事件

    function send(){

        let content = txtMsg.value;//先拿到聊天的内容

        socket.send(content);

        txtMsg.value = '';

    }

    function handleKeyDown(event){

        if(event.keyCode == 13)

            send();

    }

    //给父级绑定点击事件 事件委托

    //要判断点的是span而非别的元素

    userUl.addEventListener('click',function(event){

        //如果事件源的类名是user的话

        if(event.target.className == 'user'){

            let username = event.target.innerHTML;

            txtMsg.value = `@${username} `;

        }

    })

</script>

</body>

</html>

<!--npm i express socket.io -S -->

后台node

let express = require('express');

let path = require('path');

let app = express();

app.get('/',function(req,res){

    res.sendFile(path.resolve('index.html'));

});

let server = require('http').createServer(app);

//socket.io是依赖http服务器

let io = require('socket.io')(server);

//声明一个对象，保存所有的客户端用户名和它们的socket对应关系

let clients = {};

//监听客户端的连接，当连接到来的时候执行此回调函数

io.on('connection',function(socket){

    //在函数的内部声明一个变量，叫username

    let username;

    //监听客户端的发过来的消息，当消息发过来的时候执行回调函数

    socket.on('message',function(data){

        if(username){

            //判断是公聊还是私聊

            let reg = /@([^ ]+) (.+)/;

            let result = data.match(reg);

            if(result){//如果result有值则匹配上了

                //此处是私聊

                let toUser = result[1];

                let content = result[2];

                clients[toUser] && clients[toUser].send({

                    username,

                    content,

                    createAt:new Date()

                });

            }else{//没匹配上

                //正常发言，向所有的客户端进行广播

                io.emit('message',{

                    username,content:data,createAt:new Date()

                });

            }

        }else{

            username = data;//把这个消息当成用户名

            //关联起来

            clients[username]= socket;

            //向所有的客户端广播说有新的用户加入聊天室

            io.emit('message',{

                username:'系统',content:`欢迎 ${username} 加入聊天室`,createAt:new Date()

            });

            //事件的名字可以自定义

            io.emit('user-added',username);

        }

    });

    //监听客户端发过来的请求，把用户数组返回

    socket.on('users',function(){

        let userList = Object.keys(clients);

        socket.emit('userList',userList);

    });

});

server.listen(8080);

/**

 * 1.实现匿名聊天

 *   1. 在客户端里连接上服务器

 *   2. 给发送按钮绑定点击事件，当点击此按钮的时候先获取文本框的内容，把文本框的内容发送到后台

 *   3. 后台服务器把此消息广播给所有的客户端。

 *   4. 所有的客户端收到消息后把此消息在ul列表里显示出来

 * 2.实现具名聊天

 *   1. 当此用户第一次向服务器发消息的时候

 *   2. 服务器会判断此客户端的用户名是否设置过，如果没设置的话就把这个消息当成用户名，以后再发消息的话都会以这个作为用户名,如果设置过了就是正常发言

 * 3. 私聊

 *   1. 点击某个在线用户，点击后会在输入框里出现  @xxx yyy

 *   2. 服务收到私聊的请求后会找到xxx对应的客户端向他单个发消息

 *   3

 *

*/

html5的新通讯技术socket.io，实现一个聊天室的更多相关文章

  1. 利用socket.io构建一个聊天室

    利用socket.io来构建一个聊天室,输入自己的id和消息,所有的访问用户都可以看到,类似于群聊. socket.io 这里只用来做一个简单的聊天室,官网也有例子,很容易就做出来了.其实主要用的东西 ...

  2. node+express+socket.io制作一个聊天室功能

    首先是下载包: npm install express npm install socket.io 建立文件: 服务器端代码:server.js var http=require("http ...

  3. Express+Socket.IO 实现简易聊天室

    代码地址如下:http://www.demodashi.com/demo/12477.html 闲暇之余研究了一下 Socket.io,搭建了一个简易版的聊天室,如有不对之处还望指正,先上效果图: 首 ...

  4. 使用socket.io打造公共聊天室

    最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室.实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室. ...

  5. Socket.io文字直播聊天室的简单代码

    直接上代码吧,被注释掉的主要是调试代码,和技术选型的测试代码 var app = require('express')(); var server = require('http').Server(a ...

  6. AngularJS+Node.js+socket.io 开发在线聊天室

    所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...

  7. Node.js下基于Express + Socket.io 搭建一个基本的在线聊天室

    一.聊天室简单介绍 采用nodeJS设计,基于express框架,使用WebSocket编程之 socket.io机制.聊天室增加了 注册登录模块 ,并将用户个人信息和聊天记录存入数据库. 数据库采用 ...

  8. 实时通讯之Socket.io

    WebSocket WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.使用WebSocket,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成 ...

  9. vue + socket.io实现一个简易聊天室

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那 ...

随机推荐

  1. Ubuntu rar的坑

    通过apt-get安装rar后,执行rar命令会有如下坑: rar: loadlocale.c:130: _nl_intern_locale_data: Assertion `cnt < (si ...

  2. P3371 【模板】单源最短路径

    题目描述 如题,给出一个有向图,请输出从某一点出发到所有点的最短路径长度. 输入输出格式 输入格式: 第一行包含三个整数N.M.S,分别表示点的个数.有向边的个数.出发点的编号. 接下来M行每行包含三 ...

  3. 伟景行 citymaker 从入门到精通系列

    伟景行 citymaker 从入门到精通(1)——js开发,最基本demo,加载cep工程文件 伟景行 citymaker 从入门到精通(2)——工程图层树加载   伟景行 citymaker 从入门 ...

  4. Implicit Animations 默认动画 读书笔记

    Implicit Animations  默认动画 读书笔记 Do what I mean, not what I say. Edna Krabappel, The Simpsons   Part I ...

  5. 借助tween.js小球沿div四边跑的动画效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. web页面调用IOS的事件

    /** * js 调用ios的方法 * @param callback */ function connectWebViewJavascriptBridge(callback) { if (windo ...

  7. Web前端基础怎么学？ JavaScript、html、css知识架构图

    以前开发者只要掌握 HTML.CSS.JavaScript 三驾马车就能胜任一份前端的工作了.而现在除了普通的编码以外,还要考虑如何性能优化,如何跨端.跨平台实现功能,尤其是 AI.5G 技术的来临, ...

  8. Hibernate初始化环境的基本封装

    public class HibernateUtils { private static SessionFactory sf; static{ sf = new Configuration().con ...

  9. Yii1 用commandBuilder方法往数据表中插入多条记录

    $builder = Yii::app()->db->schema->commandBuilder; // 创建builder对象 $command = $builder->c ...

  10. [题解] cogs 2240 架设电话线路

    http://cogs.pro:8080/cogs/problem/problem.php?pid=2240 与洛谷P2885几乎一致,https://www.luogu.org/problemnew ...