Server:

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

  , io = require('socket.io').listen(app)

  , fs = require('fs');

app.listen(80);

console.log('server listen on port 80');

function handler (req, res) {

  fs.readFile(__dirname + '/public/index.html',

  function (err, data) {

    if (err) {

      res.writeHead(500);

      return res.end('Error loading index.html');

    }

    res.writeHead(200);

    res.end(data);

  });

}

var chatroom=io.of('/chat').on('connection',function(socket){

    console.log(id+'connected');

    var id=null;

    socket.on('setid',function(sid){

        id=sid;

        socket.emit('id',id);

        chatroom.emit('msg',id+' join the chatroom');

    });

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

        chatroom.emit('msg',id+' : '+msg);

    });

})

Client:

<!doctype html>

<html>

<head>

    <title>socket.io</title>

    <script type="text/javascript" src="/socket.io/socket.io.js"></script>

    <style type="text/css">

    body{

        font: message-box;

    }

    #output{

        height:200px;

        border:1px solid #888;

        overflow-y: scroll;

    }

    </style>

</head>

<body>

    <div id="output"></div>

    <span id="userid"></span>

    <input type="text" id="text" placeholder='input your name'>

    <button id="btn">connect</button>

    <script type="text/javascript">

        var socket = null;

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

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

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

        btn.onclick=function(e){

            console.log('btn click');

            socket = io.connect('http://localhost/chat');

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

                console.log('connect');

                socket.emit('setid',text.value);

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

                    document.getElementById('userid').innerText=id+':';

                });

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

                    output.innerText+=(msg+'\n');

                    output.scrollTop=output.scrollHeight;

                });

                btn.innerText='send';

                text.placeholder='input msg';

                text.value='';

                btn.onclick=function(e){

                    socket.emit('msg',text.value);

                    text.value='';

                }

            });

        };

    </script>

</body>

</html>

使用nodejs引用socket.io做聊天室的更多相关文章

  1. Socket.io在线聊天室

    从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Javascript引擎.chrome浏 ...

  2. 使用socket.io搭建聊天室

    最近在学习nodejs,需要找一些项目练练手.找来找去发现了一个聊天室的教程,足够简单,也能从中学到一些东西.下面记录我练习过程中待一些笔记. nodeJS模块 共用到了2个模块,express和so ...

  3. node.js + socket.io实现聊天室一

    前段时间,公司打算在社区做一个聊天室.决定让我来做.本小白第一次做聊天类功能,当时还想着通过ajax请求来实现.经过经理提示,说试试当前流行的node.js 和socket.io来做.于是就上网学习研 ...

  4. 使用 Socket.IO 开发聊天室

    前言 Socket.IO 是一个用来实现实时双向通信的框架,其本质是基于 WebSocket 技术. 我们首先来聊聊 WebSocket 技术,先设想这么一个场景: · 用户小A,打开了某个网站的充值 ...

  5. Socket.io官方聊天室DEMO的学习笔记

    照着Socket.io官方的聊天室代码敲了一遍,遇到了一个奇怪的问题: 每次点击SEND按钮的时候,都会重新刷新页面. 在点击页面的一瞬间,看到了正在加载jquery的提示, 然后以为是jquery用 ...

  6. node express+socket.io实现聊天室

    参照网址:https://www.jb51.net/article/135058.htm https://www.cnblogs.com/limitcode/p/7845168.html https: ...

  7. nodejs之socket.io 聊天实现

    写在前面:最近很火的“996”话题,可谓是引起一片热议,马老师说:能够996应该是幸运的,996是对奋斗者的一种机遇(记得不是很清楚).996缺少的是自己的空闲时间了,当我是空闲的时候偶尔996挺好的 ...

  8. 使用nodejs+express+socketio+mysql搭建聊天室

    使用nodejs+express+socketio+mysql搭建聊天室 nodejs相关的资料已经很多了,我也是学习中吧,于是把socket的教程看了下,学着做了个聊天室,然后加入简单的操作mysq ...

  9. nodejs+express+socket.io

    其实官网文档清楚了  https://socket.io/get-started/chat/ 但是因为之前写的是nodejs+express, socket.io是后加的, 还是有小坑 服务器端: 官 ...

随机推荐

  1. [Java] File文件列表

    package test.file; import java.io.File; import java.io.FilenameFilter; /** * 文件列表,文件过滤 * @author Fro ...

  2. phpmyadmin #2003 无法登录 MySQL服务器的解决方法

    本文章向大家介绍phpmyadmin #2003 无法登录 MySQL服务器的解决方法,需要的码农可以参考一下. 通过phpmyadmin连接mysql数据库时提示:"2003 无法登录 M ...

  3. 云计算PAAS平台测试设计之镜像管理

    下面是云计算PAAS平台页面概览: 今天我们要讲的是镜像管理页面的测试设计: 可以看到,这个页面主要有增删改查四个功能. 1. 查询镜像 (1)易用性:查看镜像查询界面,界面上各组件设计合理.美观.易 ...

  4. http 302

    404 not found500 internal server error 302临时重定向.指被访问的网页由于各种需求临时跳转到其它页面. yii若用户为游客状态,但controller中添加了权 ...

  5. BZOJ1002 轮状病毒

    Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下图 ...

  6. 操作笔记：linux下安装ftp

    1,安装ftp [root@iZ945sgm0ugZ ~]# yum install vsftpd 安装成功的信息: [root@iZ945sgm0ugZ ~]# yum install vsftpd ...

  7. 再看.net本质（二）

    3.[HTTP协议]  当浏览器寻找到Web服务器的地址之后,浏览器将帮助我们把对服务器的请求转换为一系列参数发送给Web服务器.服务器收到浏览器的请求对数之后,将会分析这些数据并进行处理,然后向浏览 ...

  8. 使用UI Automation实现自动化测试 --工具使用

    当前项目进行三个多月了,好久也没有写日志了:空下点时间,补写下N久没写的日志 介绍下两个工具 我本人正常使用的UISpy.exe工具和inspect.exe工具 这是UISPY工具使用的图,正常使用到 ...

  9. javascript代码复用模式

    代码复用有一个著名的原则,是GoF提出的:优先使用对象组合,而不是类继承.在javascript中,并没有类的概念,所以代码的复用,也并不局限于类式继承.javascript中创建对象的方法很多,有构 ...

  10. Visual C++ 开发心得与调试技巧

    自己平时收集的一些技巧与心得,这里分享出来,普及一下知识. 1.如何在Release状态下进行调试 Project->Setting=>ProjectSetting对话框,选择Releas ...