后台代码 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. 关于javaBean中boolean类型变量的set和get注入后传到前端JS中的问题

    set和get方法如下: public boolean isLine() {        return isLine;    } public void setLine(boolean isLine ...

  2. 堆和栈的区别【zz】

    一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈.2. ...

  3. MongoDB主从配置

    master的配置 # cat mongod.conf dbpath = /app/sinova/mongodata/db            #指定数据库目录 logpath = /app/sin ...

  4. 数学 ZJOI 2012 数列

    #include <iostream> #include <cstring> #include <cstdio> using namespace std; ; st ...

  5. Delphi NativeXml用法攻略

    NativeXml用法攻略 NativeXml可以在官网上下载,下载后将文件夹放在指定地方,打开DELPHI在其环境变量中引用NativeXml路径,然后在程序中引用NativeXml单元,我们就可以 ...

  6. 数据结构典型算法的VC实现（袁辉勇）

    1. 迷宫问题求解 #include <stdio.h> #define m 8 //迷宫内有8列 #define n 8 //迷宫内有8行 #define MAXSIZE 100//栈尺 ...

  7. Java Annotation 必须掌握的特性

    什么是Annotation? Annotation翻译为中文即为注解,意思就是提供除了程序本身逻辑外的额外的数据信息.Annotation对于标注的代码没有直接的影响,它不可以直接与标注的代码产生交互 ...

  8. 阿里巴巴算法工程师四面(三轮技术+hr面)详细面经

    阿里面试总结: 一遍一遍地刷阿里网站,今天发现“面试中”变成“待跟进offer”了,写个面经攒人品,希望offer通知邮件早点来吧. 我当时投简历时投了C/C++工程师,其实也没经过啥考虑,因为我一开 ...

  9. Solr和IK分词器的整合

    IK分词器相对于mmseg4J来说词典内容更加丰富,但是没有mmseg4J灵活,后者可以自定义自己的词语库.IK分词器的配置过程和mmseg4J一样简单,其过程如下: 1.引入IKAnalyzer.j ...

  10. Lucene简介

    1 lucene简介1.1 什么是lucene    Lucene是一个全文搜索框架,而不是应用产品.因此它并不像www.baidu.com 或者google Desktop那么拿来就能用,它只是提供 ...