后台代码 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. iOS Developer Libray （中文版）-- About Objective-C

    该篇是我自己学习iOS开发时阅读文档时随手记下的翻译,有些地方不是很准确,但是意思还是对的,毕竟我英语也不是很好,很多句子无法做到准确的字词翻译,大家可以当做参考,有错误欢迎指出,以后我会尽力翻译的更 ...

  2. Mysql分页查询

    取前5条数据 select * from table_name limit 0,5 或 select * from table_name limit 5 取第11条到第15条数据,共5条 select ...

  3. mysql 监控长事务

    mysql> desc information_schema.innodb_trx -> ; +----------------------------+----------------- ...

  4. Oracle 多版本控制

    SESSION 1: SQL> create table t 2 as 3 select * from all_users; Table created. SQL> variable x ...

  5. texedo 分布式事务

    1.问题现象 但是实际情况,完全出乎笔者的想法.检查一般对象数据表锁定,只需要检查v$locked_object和v$transaction视图,就可以定位到具体人.但是检查之后的结果如下: SQL& ...

  6. Unity NGUI中Anchor的用法

    unity版本 4.5.1 NGUI版本 3.6.5 通过NGUI中的Anchor设置按钮位置. 1.首先用NGUI创建两个按钮,按钮的创建在Hierachy窗口中必须按如下形式: Anchor用于确 ...

  7. 「Poetize3」绿豆蛙的归宿

    描述 Description 给出一个有向无环图,起点为1终点为N,每条边都有一个长度,并且从起点出发能够到达所有的点,所有的点也都能够到达终点.绿豆蛙从起点出发,走向终点.到达每一个顶点时,如果有K ...

  8. Light OJ 1025 - The Specials Menu（区间DP）

    题目大意:     给你一个字符串,问有多少种方法删除字符,使得剩下的字符是回文串. 有几个规定: 1.空串不是回文串 2.剩下的字符位置不同也被视为不同的回文串.如:AA有三种回文串 A, A, A ...

  9. 图解linux下top命令的使用

    top命令经常用来监控linux的系统状况,比如cpu.内存的使用,程序员基本都知道这个命令,但比较奇怪的是能用好它的人却很少,例如top监控视图中内存数值的含义就有不少的曲解. 本文通过一个运行中的 ...

  10. 杂题 UVAoj 10000 Longest Paths

      Longest Paths  It is a well known fact that some people do not have their social abilities complet ...