文档章节

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

c
 caiyezi
发布于 2016/11/08 20:23
字数 322
阅读 1
收藏 0

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/

本文转载自:http://www.cnblogs.com/vipzhou/p/5787823.html

共有 人打赏支持
c
粉丝 1
博文 108
码字总数 0
作品 0
西安
程序员
Spring Boot使用Netty SocketIO实现WebIM功能

摘要: Netty SocketIO是一个 Java 语言版本的 Socket.IO 服务器的实现,基于 Netty 框架开发,使用简单,功能强大。 Netty SocketIO是一个 Java 语言版本的 Socket.IO 服务器的实现,基于 Ne...

优客服多渠道客服系统
2017/01/23
384
2
用node实现一个简单的聊天室——websocket实践

websocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。大多数 Web 应用程序将通过频繁的异步JavaScript和XML(AJAX)请求实现长轮询。轮询的效率低,非常浪费资源。而webso...

xanggang
08/13
0
0
uliweb支持在gevent及gevent-socketio上运行

在前面将tornado的支持添加到uliweb中之后,今天又完成了对gevent和gevent-socketio的支持。这里的支持是指可以在它们上面运行。因为tornado, gevent, gevent-socketio都可以作为服务器来跑w...

limodou
2013/09/29
0
1
wechat-admin:Celery使用篇

wechat-admin:Celery使用篇 小明明s à domicile2017-08-1566 阅读 Python Celery是一个专注于实时处理和任务调度分布式任务队列。通过RabbitMQ、Redis、MongoDB等消息代理,把任务发给执行...

小明明s à domicile
2017/08/15
0
0
共享和出售即时通讯源代码,类似微信陌陌,全新定义基于Tiagse的社交聊天系统

这套IM系统是我个人自主开发 完全基于Tiagse ,主要功能为:Android、iOS和服务端,可以支持包括文字 图片,语音等任何消息形式,系统采用的成熟的XMPP协议+CentOS 6.5+Jdk1.8+mysql5.6+mon...

iholdcode
2015/08/13
1K
4

没有更多内容

加载失败,请刷新页面

加载更多

Python爬虫:Scrapy框架的安装和基本使用

大家好,本篇文章我们来看一下强大的Python爬虫框架Scrapy。Scrapy是一个使用简单,功能强大的异步爬虫框架,我们先来看看他的安装。 Scrapy的安装 Scrapy的安装是很麻烦的,对于一些想使用S...

糖宝lsh
32分钟前
3
0
Android Dialog几种对话框

1,普通对话框 2,单选对话框 3,多选对话框 4,日期选择对话框 5,时间选择对话框 6,日期选择对话框 7,进度条对话框 普通对话框 AlertDialog.Builder builder = new AlertDialog.Builde...

lanyu96
39分钟前
1
0
awk命令

-F选项的作用是指定分隔符。如果不加-F选项,则以空格或者tab为分隔符。print为打印操作,用来打印某个字段。$1为第1个字段,$2为第2个字段,以此类推。但是$0比较特殊,它表示整行: [root@cen...

野雪球
47分钟前
2
0
一切都靠大数据:滴滴已封禁4.3万人员、车辆

这段时间以来,滴滴出行相继出炉了各种整改措施,包括自身安全建设和外部社会共建,昨日就刚刚宣布正在筹备建立安全监督顾问委员会。 据媒体最新报道,9月30日,上海市交通委员会执法总队、上...

linuxCool
今天
5
0
awk命令用法介绍

10月18日任务 9.6/9.7 awk 1.awk(上)(下) 1.awk 分段操作功能 指定分隔符,并把第一段打印出来,不会改动文件内容 将所有内容打印出来 awk 没有指定分隔符号,则会默认用空格或者空白字符...

hhpuppy
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部