使用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 条评论
登录 后参与评论

相关文章

来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.4K7
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

3005
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

8578
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3655
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

5898
来自专栏跟着阿笨一起玩NET

c#实现打印功能

3652
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2916
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

38410
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5228
来自专栏魂祭心

原 canvas绘制clock

5074

扫码关注云+社区