写了一个简单的demo，直接上代码吧。用的时候注意一下版本号，可能 socket.io 的 API 有修改~

效果图

index.html

<!DOCTYPE <!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>websocket测试</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.dev.js"></script>

    <style>

    * {margin:0; padding:0;}

    html {background-color:#fff; }

    #footer {border:0 solid #c3c3c3; position: fixed; height: 40px; width:98%; bottom:10px; left:1%; display:flex; flex:1; padgint:10px 0;}

    .btn {background-color:#1AAD19; color:#fff; box-sizing:border-box; pading:0 1.32em; line-height:2.3; border-radius:5px; width:100px; display:inline-block; font-size:13px; text-align:center; text-decoration:none;height:40px;line-height:40px;font-size:16px;1}

    .ipt {border:0; outline:0; background-color:transparent; font-size:17px; height:1.47em; line-height:1.47; width:100%; height:100%;}

    .ipt_container {display:flex; flex:1; border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;}

    .btn_container {ymargin:0 10px;}

    #main {width:98%; height: 90%; margin:10px auto; display:block;}

    #main textarea {border:1px solid #ddd; width:100%; height:100%; padding:5px;  line-height:22px; font-size:14px;}

    /* .ipt_container:before {content:" "; position:absolute; top:0; left:0; height:1px; border-top:1px solid #e5e5e5; color:#e5e5e5;transform:scaleY(0.5); z-index:2; transform-origin:0 0;}

    .ipt_container:after {content:" "; position:absolute; bottom:0; right:0; height:1px; border-bottom:1px solid #e5e5e5; color:#e5e5e5;transform:scaleY(0.5); z-index:2; transform-origin:0 100%;} */

    </style>

</head>

<body>

<div id="wrapper">

    <div id="main">

        <textarea readonly="readonly" id="txtConsole"></textarea>

    </div>

    <div id="footer">

        <div class="ipt_container">

            <input type='text' class="ipt" placeholder="请输入内容..." id="chatpIpt"/>

        </div>

        <div class="btn_container">

            <a href="javascript:;" class="btn" onclick="sendMsgHandler();return false;">发送</a>

        </div>

    </div>

</div>

<script type="text/javascript">

// common function

function getEl(id) {

    return typeof(id) === 'string' ? document.getElementById(id) : null;

}

// native code

// var websocket = new WebSocket('ws://127.0.0.1:8080/');

// websocket.addEventListener('error', function (evt) {

//     console.log('websocket error.')

// });

// websocket.addEventListener('open', function (evt) {

//     console.log('websocket open.')

// });

// websocket.addEventListener('message', function (evt) {

//     console.log(evt.data);

// });

// websocket.addEventListener('close', function (evt) {

//     console.log('websocket close.')

// })

// Create SocketIO instance, connect

var socket = io.connect('ws://localhost:8080');

// Add a connect listener

socket.on('connect', function() {

    showMessage('Client has connected to the server!');

});

// Add a connect listener

socket.on('news', function(data) {

    var str = 'Received data from server. data : ' + JSON.stringify(data);

    showMessage(str);

});

// Add a disconnect listener

socket.on('disconnect', function() {

    showMessage('The client has disconnected');

});

// Sends a message to the server via sockets

function sendMessageToServer(msgData) {

    socket.emit('test_event', msgData);

}

var delayScrollTimer = null;

function showMessage(str) {

    var txt = getEl('txtConsole')

    txt.value = txt.value + '\n' + str;

    if (delayScrollTimer) {

        clearTimeout(delayScrollTimer);

        delayTimer = null;

    }

    delayScrollTimer = setTimeout(function() {

        txt.scrollTop = txt.scrollHeight;

    }, 10);

}

// test

function sendMsgHandler() {

    var elem = getEl('chatpIpt');

    var iptValue = elem.value;

    sendMessageToServer({data : iptValue});

    elem.value = "";

    elem.focus();

}

</script>

</body>

</html>

socket_server.js

var app = require('http').createServer(handler)

var io = require('socket.io')(app);

var fs = require('fs');

app.listen(8080);

function handler(req, res) {

    res.writeHead(200, { 'Content-Type': 'text/html' });

    res.end('<h1>Hello Socket Lover!</h1>');

}

io.on('connection', function (socket) {

    socket.emit('news', { data : 'server world' });

    socket.on('test_event', function (data) {

        console.log('receive data from client. data : ' + JSON.stringify(data));

        var str = data.data + "(from server by " + new Date().getTime() + ")";

        socket.emit('news', { data : str});

    });

    socket.on('disconnect', function () {

        console.log('websocket close. -- server log');

    });

    // var num = 1;

    // setInterval(function xx(params) {

    //     socket.emit('news', { num: num++});

    // }, 1 * 1000);

});

socket.io的websocket示例的更多相关文章

  1. 用socket.io实现websocket的一个简单例子

    socket.io 是基于 webSocket 构建的跨浏览器的实时应用. 逛博客发现几个比较好的 一.用socket.io实现websocket的一个简单例子 http://biyeah.iteye ...

  2. Socket.IO – 基于 WebSocket 构建跨浏览器的实时应用

     Socket.IO 是一个功能非常强大的框架,能够帮助你构建基于 WebSocket 的跨浏览器的实时应用.支持主流浏览器,多种平台,多种传输模式,还可以集合 Exppress 框架构建各种功能复杂 ...

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

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

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

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

  5. 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

    原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...

  6. websocket与socket.io

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

  7. websocket 与Socket.IO介绍

    一  websocket WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,例如 Chrome,Safrie,Firefox,Opera,IE等等,对该协议支持最早的 ...

  8. .net , java webSocket 连接 Socket.io (1.4.4版本) 问题

    .net版Socketio4net类库和java版socket.io-java-client类库 连接socket.io 1.4版本都不行,网上大多是socket.io 0.9版本的,socket.i ...

  9. Websocket --socket.io的用法

    <!DOCTYPE html> <html> <head> <title>Hello WebSocket</title> <link ...

随机推荐

  1. python函数式编程——返回函数

    1.函数作为返回值 高阶函数除了可以接受函数作为参数外,还可以把函数作为结果值返回. 2.闭包 注意到返回的函数在其定义内部引用了局部变量args,所以,当一个函数返回了一个函数后,其内部的局部变量还 ...

  2. 【转】Windows Server 2008 R2下安装 .net framework3.5

    原文地址:http://hi.baidu.com/tonny_dxf/item/6831bcdc3d7c06e7b2f7777c      [你必须用角色管理工具安装.net framework3.5 ...

  3. 根据关键字找进程id

    #!/usr/bin/pythonimport subprocessimport sysimport loggingimport os gameproc = "jd_5.py" d ...

  4. FastJson 支持配置的PropertyNamingStrategy四种策略

    摘要: FastJson默认使用CamelCase,在1.2.15版本之后,FastJson支持配置PropertyNamingStrategy,支持四种策略: CamelCase.PascalCas ...

  5. MyEclipse 安装插件 Github安装/使用 教程

    2016年02月18日 09:45:23 阅读数:4531 本文的目的是 1.在 Myeclipse10.7中 集成Github并使用. 选择的安装方式是:MyEclipse 中设置下文中1后,下载g ...

  6. Python学习（十八）—— 数据库（三）

    转载自http://www.cnblogs.com/linhaifeng/articles/7356064.html 一.数据操作 1.插入数据INSERT 1. 插入完整数据(顺序插入) 语法一: ...

  7. 51Nod1553 周期串查询 字符串 哈希 线段树

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1553.html 题目传送门 - 51Nod1553 题意 有一个串只包含数字字符.串的长度为n,下标 ...

  8. 51Nod1306 高楼和棋子 动态规划

    原文链接https://www.cnblogs.com/zhouzhendong/p/51Nod1306.html 题目传送门 - 51Nod1306 题意 有个N层的高楼和若干个棋子,所有的棋子都是 ...

  9. HDU4779 Tower Defense 组合数学

    原文链接https://www.cnblogs.com/zhouzhendong/p/HDU4779.html 题目传送门 - HDU4779 题意 $T$ 组数据. 给定一个 $n\times m$ ...

  10. maya shell 和 UV shell 的区别

    maya shell 和 UV shell 的区别 shell 是 maya 模型自身分离的部分 UV shell 是 UV 分离的部分 有多少个shell,就至少有多少个 UV shell,但是一个 ...