使用socket.io开发简单群聊功能

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/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏美丽应用

Captchas Tools:简洁高效的验证码复制器

942
来自专栏BeJavaGod

搜索服务solr 一二事(1) - solr-5.5 使用自带Jetty或者tomcat 搭建单机版搜索服务器

solr,什么是solr,就是你要吃的东西“馊了”,不能吃了,out of date~ 嘛。。。开个玩笑,发音就是‘搜了’,专门用于搜索的一个开源框架,lunc...

2926
来自专栏后端之路

mysql安全之loginpath

用了许久的mysql,最近发现了一个新玩具。 对于兼运维的开发同学来说,需要备份数据库。我们一般通过crontab来实现。 执行 crontab -e 30 ...

1905
来自专栏架构师之路

一分钟了解互联网动静分离架构

一、静态页面 静态页面,是指互联网架构中,几乎不变的页面(或者变化频率很低),例如: 首页等html页面 js/css等样式文件 jpg/apk等资源文件 ? ...

3475
来自专栏沈唁志

如何在Ubuntu 16.04上安装PrestaShop

如果您曾经考虑过开设在线商店,您可能会感受到各种免费的开源电子商务解决方案。虽然有这么多的选择意味着几乎可以肯定有一个可用的有效解决方案适合您的特定情况,但它也...

1363
来自专栏网络

一分钟了解互联网动静分离架构

一、静态页面 静态页面,是指互联网架构中,几乎不变的页面(或者变化频率很低),例如: 首页等html页面 js/css等样式文件 jpg/apk等资源文件 静态...

1997
来自专栏假装我会写代码

用 Algolia DocSearch 轻松实现文档全站搜索

1813
来自专栏CSDN技术头条

Java 程序如何正确地打日志

我们 Java 程序员在开发项目时都是依赖 Eclipse/ Idea 等开发工具的 Debug 调试功能来跟踪解决 Bug,在开发环境可以这么做,但项目发布到...

873
来自专栏软件开发 -- 分享 互助 成长

Android深度探索(卷1)HAL与驱动开发 虚拟环境的安装

   最近在看《Android深度探索(卷1)HAL与驱动开发》安装随书带的虚拟环境浪费了很多时间,说是虚拟环境的安装倒不如说是虚拟环境的导入,其实没什么技术含...

511
来自专栏SeanCheney的专栏

《Python分布式计算》 第5章 云平台部署Python (Distributed Computing with Python)云计算和AWS创建AWS账户创建一个EC2实例使用Amazon S3存

上一章介绍了创建Python分布式应用的Celery和其它工具。我们学习了不同的分布式计算架构:分布任务队列和分布对象。然而,还有一个课题没有涉及。这就时在多台...

3146

扫码关注云+社区