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

相关文章

来自专栏维C果糖

Git 的安装流程及步骤

在之前的「史上最简单的 GitHub 教程」中,我们已经知道了如何创建 GitHub 账号、创建仓库、进行个性化设置等等,但是我们还要知道:GitHub 是基于...

2577
来自专栏Eugene's Blog

几个WordPress 主题在线检测工具分类目录文章标签友情链接联系我们

1453
来自专栏猛牛哥的博客

aardio v13.11-21更新内容

1894
来自专栏Java学习123

Windows平台kafka环境的搭建

1843
来自专栏张善友的专栏

Mono环境下不支持中文的解决方法

在运行这个代码的时候 《主要城市公交路线下载Mono版(使用MonoDevelop开发)》出现了下面的异常: ? 这是因为中文的代码支持包没有安装,启动YaST...

2198
来自专栏海天一树

Python selenium实现微博自动登录

这里使用selenium实现。 如果没有安装过python的selenium库,则安装命令如下

961
来自专栏bboysoul

odoo安装和体验

odoo是一个开源的erp系统,当然也有收费版本的,国产的gooderp就是基于它去修改的,个人觉得如果企业里面用不起sap的话odoo还是比较不错的,而且它还...

1981
来自专栏Charlie's Road

Mac端Wireshark抓包工具使用

最近换了新公司,新项目用的socket做网络请求,工作几年,终于见到HTTP的协议用途。可能之前待的都是小公司吧。最近为了学习,安装使用了Wireshark.安...

1.5K2
来自专栏Guangdong Qi

iOS开发常用之消息相关

833
来自专栏前端开发

利用代码破解宝塔面板使用专业版

首先安装宝塔面板免费版,一键环境后,不要登录宝塔官网账号绑定,直接运行专业版升级指令。

7.4K8

扫码关注云+社区

领取腾讯云代金券