后台代码 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. 微控制器（MCU）架构介绍

    微控制器(MicroController)又可简称MCU或μC,也有人称为单芯片微控制器(Single Chip Microcontroller),将ROM.RAM.CPU.I/O集合在同一个芯片中, ...

  2. struts2+jquery+json集成

    以下采用struts2+jquery+json模拟一个案例.当点击提交按钮时会把输入的数据提交到后台,然后从后台获取数据在客户端显示. 效果如下: 接下来为struts2+jquery+json集成步 ...

  3. 【转】Android中设置TextView的颜色setTextColor

    原文网址:http://www.cnblogs.com/myphoebe/archive/2012/01/06/2314728.html android中设置TextView的颜色有方法setText ...

  4. 嵌入式ARM-Linux开发工具下载地址合集

    insight gdb  http://ftp.twaren.net/Unix/Sourceware/ 说明:GDB可视化调试工具 http://gro.clinux.org/frs/?group_i ...

  5. 图论 BZOJ 3669 [Noi2014]魔法森林

    Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节 ...

  6. vim下缩进及高亮设置

    1.配置文件的位置 在目录 /etc/ 下面,有个名为vimrc的文件,这是系统中公共的vim配置文件,对所有用户都有效.而在每个用户的主目录下,都可以自己建立私有的配置文件,命名为:“.vimrc” ...

  7. cf601A The Two Routes

    A. The Two Routes time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  8. Velocity常用方法

    1.字符串替换 replace#if($!{name} != '')#set($tempName = $!{name})#set($tempName = $tempName.Replace('abc' ...

  9. [置顶] C++中RTTI机制剖析

    C++中要想在运行时获取类型信息,可没有Java中那么方便,Java中任何一个类都可以通过反射机制来获取类的基本信息(接口.父类.方法.属性.Annotation等),而且Java中还提供了一个关键字 ...

  10. MyBatis（4）：动态SQL

    什么是动态SQL MyBatis的一个强大特性之一通常是它的动态SQL能力.如果你有使用JDBC或其他相似框架的经验,你就明白条件串联SQL字符串在一起是多么地痛苦,确保不能忘了空格或者在列表的最后的 ...