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

相关文章

来自专栏田飞雨的专栏

Docker 使用指南 (二):搭建本地仓库

去中央仓库下载镜像有时候非常的慢,所以 docker 本地仓库和 gitlab 类似,都是为了便于公司内部人员的使用。

4.7K0
来自专栏性能与架构

redis性能测试工具 redis-benchmark

image.png redis-benchmark 是redis自带的性能测试工具,可以用来测试本地或远程redis的性能 基本测试 redis-benchm...

3758
来自专栏Java后端技术

Centos7设置IP为固定值

注意:如果发现你的虚拟机连不上网,ping固定地址的时候出现:connect:Network is unreachable;而且使用以下命令查看ip时发现ip并...

674
来自专栏土豆专栏

Java Web入门基础之Tomcat

可以这么理解Tomcat:开源的Web应用服务器,一般用于中小型系统和并发访问用户不是很多的情况下,是开发和调试JSP的首选。对于一个初学者来说,可以这样认为,...

4036
来自专栏疯狂的小程序

分享微信小程序推送消息步骤

启用并设置消息推送配置后,用户发给小程序的消息以及开发者需要的事件推送,都将被微信转发至该服务器地址中.

6196
来自专栏安恒信息

安恒信息预警公告: Tomcat 全系报请求漏洞

据安恒信息获悉,Tomcat 6.x、7.x、8.x三个分支均发现请求漏洞,漏洞危害级别为高危,且影响范围大,建议用户尽快修复。 CVE-2014-0227 ...

33310
来自专栏nummy

Django静态文件详解

Django通过django.contrib.staticfiles来管理静态文件。

673
来自专栏ccylovehs

linux环境下安装jdk

JAVA_HOME=/usr/java/jdk1.7.0_67 export JAVA_HOME CLASSPATH=.:$JAVA_HOME/lib:$JAV...

591
来自专栏PHP技术大全

docker 镜像与容器的导入导出操作实践

公司有一台测试服务器,网速比较慢,特别是下载一些国外站点镜像的时候,而我本机则比较快,还有梯子,所以在思考一个问题;是否能在我本地把镜像下载下来,然后复制到测试...

141
来自专栏抠抠空间

Linux的安装(虚拟机环境)与基础配置

1670

扫码关注云+社区