1、新建package.json文件：

  1. {
  2.   "name": "socket-chat-example",
  3.   "version": "0.0.1",
  4.   "description": "my first chat socket-chat-example",
  5.   "dependencies": {
  6.     "express": "^4.14.0",
  7.     "socket.io": "^1.4.8"
  8.   }
  9. }

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

  1. //使用express搭建web服务器
  2. var express = require("express");
  3. var app = express();
  4. var http = require("http").Server(app);
  5. //使用socket.io监听事件
  6. var io = require("socket.io")(http);
  7. //使用express发送css js等静态资源
  8. app.use(express.static("public"));
  9.  
  10. //index.html
  11. app.get("/",function(req,res){
  12.     res.sendFile(__dirname + "/index.html");
  13. });
  14.  
  15. //socket.io监听事件
  16. io.on("connection",function(socket){
  17.     console.log("a user connected");
  18.     socket.on("disconnect",function(){
  19.         console.log("a user disconnected");
  20.     });
  21.  
  22.     //实时监听chat message事件
  23.     socket.on("chat message",function(msg){
  24.         io.emit("chat message",msg);
  25.     })
  26. });
  27.  
  28. //服务器监听开启
  29. http.listen(3000,function(){
  30.     console.log("listening on *:3000");
  31. });

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

  1. <!doctype html>
  2. <html>
  3.   <head>
  4.     <title>Socket.IO chat</title>
  5.     <style>
  6.       * { margin: 0; padding: 0; box-sizing: border-box; }
  7.       body { font: 13px Helvetica, Arial; }
  8.       form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
  9.       form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
  10.       form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
  11.       #messages { list-style-type: none; margin: 0; padding: 0; }
  12.       #messages li { padding: 5px 10px; }
  13.       #messages li:nth-child(odd) { background: #eee; }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <ul id="messages"></ul>
  18.     <form action="">
  19.       <input id="m" autocomplete="off" /><button>Send</button>
  20.     </form>
  21.     <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
  22.     <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  23.  
  24.     <script type="text/javascript">
  25.         var socket = io();
  26.         $('form').submit(function(){
  27.                //点击发送按钮，提交输入的信息
  28.             socket.emit('chat message', $('#m').val());
  29.             $('#m').val('');
  30.             return false;
  31.           });
  32.  
  33.           socket.on('chat message', function(msg){
  34.             //将chat message显示在页面
  35.             $('#messages').append($('<li>').text(msg));
  36.           });
  37.     </script>
  38.   </body>
  39. </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. iOS button 里边的 字体的 摆放

    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft; button.titleEdgeInsets ...

  2. 关于jquery判断对象是否为空

    1. jquery对象分为两种,一种是dom对象,dom对象会自带一个length属性,所以这种情况: obj.length == 0 可以判断对象为空 2. jquery也可以自定义对象,如 var ...

  3. HDU 1540 Tunnel Warfare（线段树+区间合并）

    http://acm.hdu.edu.cn/showproblem.php?pid=1540 题目大意:抗日战争期间进行地道战,存在n个村庄用地道连接,输入D表示破坏某个村庄(摧毁与其相连的地道, 包 ...

  4. shell脚本批量处理字符串

    上周五运营那边给了一份手机号码的excle,要求查询出所有对应于用户编号的用户的信息.这个时候遇到了一个问题就是,需要查询的用户数量很多,不可能一个一个去查,而excle中的格式又不符合sqlquer ...

  5. codeforces 420B Online Meeting

    一道实现很蛋疼的题.必须静下理清思路,整理出各种情况.不然就会痛苦地陷入一大堆if..else里不能自拔. #pragma comment(linker, "/STACK:102400000 ...

  6. 关于iphone、安卓手机VPN全面解析

    现在智能手机功能越来越强大,网络APP层出不穷,社交大佬facebook.twitter等纷纷推出了自己的社交APP应用,大部分手机已经内置了很多社交应用,包括facebook等:android.io ...

  7. windows下关闭80端口被system占用的情况

    用管理员运行cmd然后用net stop http 停止pid 为4的进程

  8. JS原生方法实现瀑布流布局

    html部分(图片都是本地,自己需要改动图片) p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec ...

  9. decode 横竖转换 2

    select sno,nvl(to_char(sum(decode(cno,'c001',score))),'-') c001,nvl(to_char(sum(decode(cno,'c002',sc ...

  10. 使用Nexus搭建本地Maven私服

    搭建了好几天这个还是不大好使,今天看了一篇文章是讲这个的,然后根据其情况,加上自己的更改最后搭建成功了 1.下载nexus, 下载地址:http://www.sonatype.org/nexus/go ...