后台代码 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. struts2令牌，防止重复提交

    struts2的令牌,可以用来防止重复提交,其原理是在提交jsp页面中,写入一个隐藏域name="token",然后在action中定义一个变量token并get.set.在服务器 ...

  2. struts2接收参数——域模型、DTO

    在开始介绍域模型之前我们要明白一点,为什么通过域模型我们可以把参数这么方便的在后台接收. 那是因为 通过参数拦截器(params interceptor)自动的把前台传过来的参数给域对象(domain ...

  3. Timus1132(二次剩余方程求解)

    题目:http://acm.timus.ru/problem.aspx?space=1&num=1132 题意:就是给出方程,p为素数,求在区间内的解. 这个思路很简单,详见:http://a ...

  4. linux 里 /etc/passwd 、/etc/shadow和/etc/group 文件内容解释

    •/etc/passwd文件用于存放用户账户信息,每行代表一个账户,每个账户的各项信息用冒号分割,例如: root:x:::root:/root:/bin/bash username:password ...

  5. [Poetize II]七夕祭

    描述 Description TYVJ七夕祭和11区的夏祭的形式很像.矩 形的祭典会场由N排M列共计N×M个摊点组成.虽然摊点种类繁多,不过cl只对其中的一部分摊点感兴趣,比如章鱼烧.苹果糖.棉花糖. ...

  6. 1B. Spreadsheets

    题目大意: 行和列的两种方式. A是1, B是2,....Z是26, AA是27, AB是28........... 如: BC23代表55列23行 还有一种表示方法:R23C55, 代表23行,55 ...

  7. 图论（网络流）：[SCOI2015]小凸玩矩阵

    Description 小凸和小方是好朋友,小方给小凸一个N*M(N<=M)的矩阵A,要求小秃从其中选出N个数,其中任意两个数字不能在同一行或同一列,现小凸想知道选出来的N个数中第K大的数字的最 ...

  8. [Sequence Alignment Methods] Cross-Recurrent Plot (CRP)

    A recurrence plot (RP) is a straightforward way to visualize characteristics of similar system state ...

  9. 配置openStack使用spice

    注:因为在测试配置过程中反复配置过多次,以下内容可能并不完整,有待验证. 按官方文档(openstack-install-guide-yum-juno)搭建和配置的OpenStack默认使用novnc ...

  10. 在asp.net中使用confirm可以分为两种:

    在asp.net中使用confirm可以分为两种: 1.没有使用ajax,confirm会引起也面刷新 2.使用了ajax,不会刷新 A.没有使用ajax,可以用StringBuilder来完成. ( ...