后台代码 index_server.js

var app = require('http').createServer(handler)//创建服务器app

   , io = require('socket.io').listen(app)//引用socket.io模块监听app

   , fs = require('fs')//引用文件处理模块

 app.listen(80);//指定app监听的端口，第二个参数127.0.0.1可省略

 function handler (req, res) {

   fs.readFile(__dirname + '/index.html',

   function (err, data) {

     if (err) {

       res.writeHead(500);

       return res.end('Error loading index.html');

     }

     res.writeHead(200);

     res.end(data);

   });

 }

 io.sockets.on('connection', function (socket) {//当客户端connection的时候，调用函数function (socket)

   socket.emit('news', { hello: 'link is OK' });//连接成功后发送news消息，传递一个josn对象

   socket.on('content', function (data) {//服务端发送my other event时，服务器接收后执行后面的函数

     socket.emit('content_callback', data);

   });

 });

前端代码 index.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <title>Document</title>

</head>

<body style="margin:0 auto;padding:0px;">

<center>

    请输入你的名字：<input id="username" type="text" value="" name="username"/>

                    <input type="button" onclick="create_user()" value="提交"/><br />

                    <input type="text" value="" name="content"/>

                    <input id="content" onclick="send()" type="button"  value="发送"/><br />

                    <span id="link"></span><br/>

    <textarea name="" id="text" cols="120" rows="20"></textarea>

</center>

</body>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

<script type="text/javascript">

var user="";

var socket = io.connect('http://localhost');//创建本地sock连接

socket.on('news',function (data) {//Socket接收news消息时执行回调函数

        var lable=document.getElementById("link");

        lable.innerHTML =data.hello;

    });

socket.on('content_callback',function (data) {//Socket接收news消息时执行回调函数

        var textarea=document.getElementById("text");

        text.value =data["user"]+"\n"+data["content"];

        var json = eval(data);

        console.log(data);

    });

function create_user(){

    var username=document.getElementById("username");

    if(username.value=="" || username.value==null){

        alert("输入为空！");

        return;

    }

    user=username.value;

    username.disabled=true;

    alert("你的用户名为："+user);

}

function send () {

    var chat={user:user,};

    var content=document.getElementById("content");

    if(content.value=="" || content.value==null){

        alert("请输入你要发送的内容");

        return;

    }

    chat['content'] = content.value;

    socket.emit('content',chat);

}

</script>

</html>

socket.io实现的更多相关文章

  1. 在web浏览器上显示室内温度（nodeJs+arduino+socket.io）

    上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...

  2. Node学习笔记（三）：基于socket.io web版你画我猜（二）

    上一篇基础实现的功能是客户端canvas作图,导出dataURL从而实现图片信息推送,下面具体讲下服务端的配置及客户端的配置同步 首先先画一个流程图,讲下大概思路 <canvas id=&quo ...

  3. node.js+socket.io配置详解

    由于我是在win7的环境下,在这里就以win7系统为例进行讲解了. 首先需要在nodejs官网下载最新版的node.js,下载完毕直接安装即可,安装成功后在cmd命令行中执行node指令,如下结果就说 ...

  4. 使用Node.js+Socket.IO搭建WebSocket实时应用

    Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新.它有着广泛的应用场景,比如在线聊天室.在线客服系统.评论系统.WebIM等. W ...

  5. socket.io简单入门(一.实现简单的图表推送）

    引子:随着nodejs蓬勃发展,虽然主要业务系统因为架构健壮性不会选择nodejs座位应用服务器.但是大量的内部系统却可以使用nodejs试水,大量的前端开发人员转入全堆开发也是一个因素. 研究本例主 ...

  6. websocket与socket.io

    什么是Websocket? Websocket是一个独立于http的实时通信协议,最初是在HTML5中被引用进来的,在HTML5规范中作为浏览器与服务器的核心通信技术被嵌入到浏览器中.WebSocke ...

  7. socket.io安装部署

    需要node.js环境 创建package.json npm init 下载相关依赖 npm install --save express@4.10.2npm会在当前目录下载所需要的依赖到node_m ...

  8. Node.js、Express、Socket.io 入门

    前言 周末断断续续的写了第一个socket.io Demo.初次接触socket.io是从其官网看到的,看着get started做了一遍,根据官网的Demo能提供简单的服务端和客户端通讯. 这个De ...

  9. socket.io，io=Manager(source, opts)

    原文:http://www.cnblogs.com/xiezhengcai/p/3968067.html 当我们在使用 var socket = io("ws://103.31.201.15 ...

  10. socket.io，命名空间

    原文:http://www.cnblogs.com/xiezhengcai/p/3966263.html 命名空间 在api部分我们说io.connect('ws://103.31.201.154:5 ...

随机推荐

  1. Qt学习 之 Socket通信（世界上最简单的例子了）

    最近写大作业用到Qt的Socket部分,网上关于这部分的资料都太过复杂,现在总结一下一些简单的应用.有机会可以给大家讲讲用Socket传送文件的代码. 这里主要讲解如何实现TCP和UDP的简单通信. ...

  2. Netty4.0学习笔记系列之三：构建简单的http服务（转）

    http://blog.csdn.net/u013252773/article/details/21254257 本文主要介绍如何通过Netty构建一个简单的http服务. 想要实现的目的是: 1.C ...

  3. index unique scan

    INDEX UNIQUE SCAN 索引唯一扫描.单块读 只可能发生在unique index/primary key 等值查找                      等待事件:db file s ...

  4. Unity 用C#脚本读取JSON文件数据

    读取JSON文件数据网上有很多方法吗,这里采用SimpleJSON,关于SimpleJSON的介绍参考以下链接:http://wiki.unity3d.com/index.php/SimpleJSON ...

  5. 自己动手实现Queue

    前言: 看到许多面经说,有时候面试官要你自己当场用模板写出自己的vector容器.于是,我也琢磨着怎么自己动手写一个,可是本人才刚刚学C++模板编程不久,会的不多.不过,我恰好在C++ Primer上 ...

  6. Building a Space Station（kruskal,说好的数论呢）

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 3820   Accepted: 1950 Description You a ...

  7. 数学(GCD,计数原理)HDU 5656 CA Loves GCD

    CA Loves GCD Accepts: 135 Submissions: 586 Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 2621 ...

  8. 《A First Course in Probability》-chape6-随机变量的联合分布-基本概念

    之前我们探讨了一元随机变量的分布列,下面我们应该将相应的性质推广到多元随机变量的分布列,在这里我们主要以讨论二元随机变量分布列为主. 利用类比的方法,我们很容易将一元随机变量的分布列的性质推广上来. ...

  9. B - Frogger

    题目大意: 一个叫做弗雷迪的青蛙坐在湖中间的一块石头上.突然他注意到他的青蛙女神菲奥娜坐在另一块石头上面,于是他计划去看她,但是呢湖里面的水很脏并且充满了游客的防晒霜,所以他想避免游泳而采用跳跃的方式 ...

  10. Tomcat Server Locations