socket.io 实现简易聊天

时间：2022-01-17 14:36:24

客户端：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            list-style: none;

        }

        textarea{

            resize: none;

        }

        .main1{

            float: left;

        }

        #main{

            float: left;

            width: 400px;

            height: 400px;

            overflow-y: auto;

            border: solid 1px blue;

        }

        .dialog{

            width: 300px;

            height: 50px;

            margin: 20px 30px;

        }

        .course-btn {

            width: 150px;

            background-color: #00b33b;

            font: 14px/40px "Helvetica Neue","Hiragino Sans GB","Segoe UI","Microsoft Yahei","微软雅黑",Tahoma,Arial,STHeiti,sans-serif;

            height: 40px;

            padding: 0 12px;

            text-align: center;

            color: #fff;

            cursor: pointer;

            margin-top: 20px;

            border-radius: 2px;

        }

        .textRun{

            display: none;

            margin-left: 30px;

            width: 300px;

        }

    </style>

</head>

<body>

    <div class="main1">

        <div class="dialog">

            <input type="text" id="username" placeholder="请输入用户名">

            <button onclick=dialog()>登录</button>

        </div>

        <div class="textRun">

            <textarea name="" id="tv" cols="30" rows="10"></textarea>

            <div onclick="textrun()" class="course-btn">发表评论</div>

        </div>

    </div>

    <div id="main">

    </div>

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

    <script>

        var username;

        function dialog () {

            username = document.getElementById('username').value;

            var DA = document.getElementsByClassName('dialog')[0];

            if(username!='') {

                socket.emit('dialog',username)

                DA.style.display = 'none';

                document.getElementsByClassName('textRun')[0].style.display = 'block';

            }

        }

        function textrun () {

            var text = document.getElementById('tv').value;

            socket.emit('text',{name:username,text:text})

            document.getElementById('tv').value = '';

        }

        var socket = io('http://localhost:3001')

        socket.on("text",function(data){

            console.log(data)

            var div = document.createElement('div');

            var t = div.innerHTML = '<p>'+data.name+':'+data.text+'</p>';

            var main = document.getElementById('main');

            main.appendChild(div)

            main.scrollTop = main.scrollHeight;

        })

    </script>

</body>

</html>

服务端：

var app = require('http').createServer();

var io = require('socket.io')(app);

var count = 0

var mapUsername = [];

function addEventLinsten(socket, event) {

    socket.on(event, function(data){

        for (var i in mapUsername) {

            if(i){

                mapUsername[i].emit(event, data)

            }

        }

    })

}

// 连接

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

    count += 1

    socket.num = count;

    mapUsername[count] = socket

    addEventLinsten(socket, 'dialog')

    addEventLinsten(socket, 'text')

    // 断开

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

        delete(mapUsername[socket.num])

    })

})

app.listen(3001);

console.log('socket 运行成功')

socket.io 实现简易聊天的更多相关文章

  1. Express&plus;Socket&period;IO 实现简易聊天室

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

  2. Node&plus;Express&plus;MongoDB &plus; Socket&period;io搭建实时聊天应用

    Node+Express+MongoDB + Socket.io搭建实时聊天应用 前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战 ...

  3. Node&plus;Express&plus;MongoDB &plus; Socket&period;io搭建实时聊天应用实战教程&lpar;二&rpar;--node解析与环境搭建

    前言 本来开始写博客的时候只是想写一下关于MongoDB的使用总结的,后来觉得还不如干脆写一个node项目实战教程实战.写教程一方面在自己写的过程中需要考虑更多的东西,另一方面希望能对node入门者有 ...

  4. Node&plus;Express&plus;MongoDB&plus;Socket&period;io搭建实时聊天应用实战教程&lpar;一&rpar;--MongoDB入门

    前言 本文并不是网上流传的多少天学会MongoDB那种全面的教程,而意在总结这几天使用MongoDB的心得,给出一个完整的Node+Express+MongoDB+Socket.io搭建实时聊天应用实 ...

  5. 示例：Socket应用之简易聊天室

    在实际应用中,Server总是在指定的端口上监听是否有Client请求,一旦监听到Client请求,Server就会启动一个线程来响应该请求,而Server本身在启动完线程之后马上又进入监听状态. 示 ...

  6. 使用socket&period;io打造公共聊天室

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

  7. node及socket&period;io实现简易websocket双向通信

    技术栈: vue2.0 + node + websocket( socket.io ) 1. 安装依赖 初始化vue项目后输入下方指令安装依赖包 // 推荐cnpm安装 npm i vue-socke ...

  8. AngularJS&plus;Node&period;js&plus;socket&period;io 开发在线聊天室

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

  9. node&plus;express&plus;socket&period;io制作一个聊天室功能

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

随机推荐

  1. RavenDB官网文档翻译系列第一

    本系列文章主要翻译自RavenDB官方文档,有些地方做了删减,有些内容整合在一起.欢迎有需要的朋友阅读.毕竟还是中文读起来更亲切吗.下面进入正题. 起航 获取RavenDB RavenDB可以通过Nu ...

  2. YTU 2924&colon; 文件操作--二进制文件读入

    2924: 文件操作--二进制文件读入 时间限制: 1 Sec  内存限制: 128 MB 提交: 58  解决: 20 题目描述 现有100名学生的姓名(name).学号(num).英语(Engli ...

  3. &lbrack;MVC&rsqb; - 异步调用后台的常用方法。

    1. 直接调用Action @Html.Action("GetTopArticle", "Home") 2. 通过url, 并用Jquery异步加载. < ...

  4. visual studio vs2010 vs2013 显示详细调试信息方法；vs debug 出错怎么办，你需要的不是答案，是方法。

    显示详细的输出信息: 选项--项目和解决方案--生成并运行--MSBuild项目生成输出详细信息: 这样在输出目录就会显示详细的错误信息,可以自己分析了.

  5. iOS中 支付宝钱包具体解释&sol;第三方支付 韩俊强的博客

    每日更新关注:http://weibo.com/hanjunqiang  新浪微博! iOS开发人员交流QQ群: 446310206 一.在app中成功完毕支付宝支付的过程 1.申请支付宝钱包.參考网 ...

  6. linux2&period;6&period;30&period;4内核移植（3）&mdash&semi;&mdash&semi;yaffs文件系统移植

    内核源码:linux2.6.30.4 交叉编译工具:3.4.5 移植linux内核至:TQ2440 工作基础:http://www.cnblogs.com/nufangrensheng/p/36696 ...

  7. LUOGU P4408 &lbrack;NOI2003&rsqb;逃学的小孩（树的直径）

    题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:“喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?”一听说要考试,Chris的父母就心急如焚,他们决定在尽 ...

  8. python新手第一天学习笔记-python循环控制和第一个python小游戏

    Python的三种逻辑控制 1.python语法. python 是以缩进作为基本判断的.同一代码缩进需要保持一致.否则会报错 1.if 的三种循环 _age = 53 # 注意,input接受的都是 ...

  9. 【BZOJ4553】&lbrack;HAOI2016&amp&semi;TJOI2016&rsqb;序列

    [BZOJ4553][HAOI2016&TJOI2016]序列 题面 bzoj 洛谷 题解 一定要仔细看题啊qwq... 我们设$mn[i],mx[i]$表示第$i$个位置上最小出现.最大出现 ...

  10. day6-面向对象基础篇

    一.面向对象引子及概念 结合编程的一些理论知识和实践,可以总结出目前存在以下编程模式: 1. 面向过程 按照业务逻辑和实现过程步骤来逐步垒代码,代码编写的逻辑即对应于实际实现的步骤过程,核心是过程两个 ...

相关文章