1、新建package.json文件：

{

  "name": "socket-chat-example",

  "version": "0.0.1",

  "description": "my first chat socket-chat-example",

  "dependencies": {

    "express": "^4.14.0",

    "socket.io": "^1.4.8"

  }

}

2、新建index.js用于聊天服务：

//使用express搭建web服务器

var express = require("express");

var app = express();

var http = require("http").Server(app);

//使用socket.io监听事件

var io = require("socket.io")(http);

//使用express发送css js等静态资源

app.use(express.static("public"));

//index.html

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

    res.sendFile(__dirname + "/index.html");

});

//socket.io监听事件

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

    console.log("a user connected");

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

        console.log("a user disconnected");

    });

    //实时监听chat message事件

    socket.on("chat message",function(msg){

        io.emit("chat message",msg);

    })

});

//服务器监听开启

http.listen(3000,function(){

    console.log("listening on *:3000");

});

3、聊天页面index.html编写：

<!doctype html>

<html>

  <head>

    <title>Socket.IO chat</title>

    <style>

      * { margin: 0; padding: 0; box-sizing: border-box; }

      body { font: 13px Helvetica, Arial; }

      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

      #messages { list-style-type: none; margin: 0; padding: 0; }

      #messages li { padding: 5px 10px; }

      #messages li:nth-child(odd) { background: #eee; }

    </style>

  </head>

  <body>

    <ul id="messages"></ul>

    <form action="">

      <input id="m" autocomplete="off" /><button>Send</button>

    </form>

    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

    <script type="text/javascript">

        var socket = io();

        $('form').submit(function(){

               //点击发送按钮，提交输入的信息

            socket.emit('chat message', $('#m').val());

            $('#m').val('');

            return false;

          });

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

            //将chat message显示在页面

            $('#messages').append($('<li>').text(msg));

          });

    </script>

  </body>

</html>

具体参考：http://socket.io/

使用socket.io开发简单群聊功能的更多相关文章

  1. 使用socket.io实现简单的聊天功能

    Socket.io实际上是WebSocket的父集,Socket.io封装了WebSocket和轮询等方法 首先得在你的项目中安装socket.io $ npm install socket.io 服 ...

  2. Java网络编程Demo，使用TCP 实现简单群聊功能GroupchatSimple，多个客户端输入消息，显示在服务端的控制台

    效果: 服务端 客户端 实现代码: 服务端 import java.io.IOException; import java.net.ServerSocket; import java.net.Sock ...

  3. NIO 实现简单群聊功能

    服务端: package com.yang.runnable; import java.io.IOException; import java.net.InetSocketAddress; impor ...

  4. Java网络编程Demo，使用TCP 实现简单群聊功能Groupchat，创建一个服务端，使多个客户端都能收到消息

    效果图: 开启服务端 客户端一 客户端二 客户端三 实现代码: 客户端类 import java.io.IOException; import java.net.ServerSocket; impor ...

  5. 使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（三）

    这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...

  6. Java-->实现群聊功能(C/S模式--TCP协议)

    --> Java 对TCP协议的支持: --> java.net包中定义了两个类ServerSocket 和Socket ,分别用来实现双向连接的server 端和client 端. -- ...

  7. socket.io实现在线群聊

    我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序.最最开始 先安装socket.io: npm install socket.io 利用Node的搭 ...

  8. day04-1群聊功能

    多用户即时通讯系统04 4.编码实现03 4.5功能实现-群聊功能实现 4.5.1思路分析 群聊的实现思路和私聊的实现非常类似. 不同的是:私聊时,服务端接收到消息后,只需要找出接收方的socket并 ...

  9. 基于koa模块和socket.io模块搭建的node服务器实现通过jwt 验证来渲染列表、私聊、群聊功能

    1. 具体代码在需要的下载 https://gitee.com/zyqwasd/socket 效果: 2. package.json文件 1. 下载基本的模块  修改了start 脚本  nodemo ...

随机推荐

  1. Windows 下, SetTimer 定时器的研究.

    一直很困惑一个问题: 我设置了一个10秒的定时器,可是被调用的函数要花费30秒, 那待调用的函数第二次是什么时候调用的呢? 20秒, 40秒, 还是50秒呢.... 所以我进行了实验. 我写了一个类  ...

  2. AsyncTask的缺陷以及解决方法

    1.AsyncTask常用于进行耗时操作,完成后更新主线程的UI. 2.缺陷:AsyncTask中维护着一个长度为128的线程池,同时可以执行5个工作线程,还有一个缓冲队列,当线程池中已有128个线程 ...

  3. 清除浮动的 why

    如果你想第三个p不被前面的浮动层所影响,就对它进行清除如果没有清除,第三个层就会移到第一个p下面 记住!!浮动是用来布局的~你看你的网页设计图,好几个版块在一条线上就是要浮动了,不需要浮动就是版块跟前 ...

  4. hdu 3254 (状压DP) Corn Fields

    poj 3254 n乘m的矩阵,1表示这块区域可以放牛,0,表示不能,而且不能在相邻的(包括上下相邻)两个区域放牛,问有多少种放牛的方法,全部不放也是一种方法. 对于每块可以放牛的区域,有放或者不放两 ...

  5. 問題排查：沒有任何多載符合 System.Timers.ElapsedEventHandler 委派

    這是在實作當前專案最後一個關鍵功能:提醒通知 所遇到的奇怪狀況 目前的設想,是以 Windows Form 結合 Timer,當作發送通知的載體 大家都知道在 C# 的環境裡,有三種內建的 Timer ...

  6. unreal3之FName及潜在bug

    FName是unreal3里对字符串高效处理的一种机制 基本原理就是把字符串hash存起来,然后每个字符串就只需要用一个数组索引值来表示了 FName的属性: NAME_INDEX Index; IN ...

  7. vsftpd移植

    1.交叉编译 2.将生成的 vsftpd 复制到目标板 /usr/sbin 目录,vsftpd.conf 复制到目标板 /etc 目录,并添加 vsftpd 为可执行: 3.配置 使用 vi 打开 v ...

  8. 30、准确计算CoreText高度的方法

    http://ios-iphone.diandian.com/post/2012-03-29/18389515 - (int)getAttributedStringHeightWithString:( ...

  9. UML用例图中泛化、扩展、包括

    在画用例图的时候,理清用例之间的关系是重点.用例的关系有泛化(generalization).扩展(extend)和包含(include).其中include和extend最易混淆.下面我们结合实例彻 ...

  10. 还在花钱搞开发？猿团YTFCloud，零基础照样做专业APP

    近日,猿团科技再推新品:YTFCloud.这是一套一体化的云端解决方案,用户可以通过平台提供的各类解决方案,一键创建应用,也就是说,YTFCloud实现了APP的DIY自制,用户无需懂得编程,零基础制 ...