写了一个简单的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-lambda函数,map函数,filter函数

    lambda函数主要理解: lambda 参数:操作(参数). lambda语句中,冒号前是参数,可以有多个,用逗号隔开,冒号右边的返回值.lambda语句构建的其实是一个函数对象 map函数: ma ...

  2. 在Hyper-V上安装配置Windows负载均衡NLB

    搭建过程 Hyper-V 是自Windows Server2008 以来提供的虚拟机管理软件,它操作简便,功能也不错,可以方便的在它里面安装各种操作系统,如图所示: 现在,想利用这几台虚拟服务器搭建一 ...

  3. swoole 教程

    环境安装:http://blog.csdn.net/ldy3243942/article/details/40263735 Task使用以及swoole_client:http://blog.csdn ...

  4. 初识VSTO Addin开发

    这篇博客将简单介绍一些VSTO Addin开发的知识. 1. VSTO是什么?我们可以用VSTO做什么? VSTO全称Visual Studio Tool for Office,是可以让我们针对现有的 ...

  5. Codeforces Round #379 (Div. 2) 总结分享

    前言 初入acm的新手,打算在cf混.这几天没有比赛,就做了个最新的Virtual participation.虽然说div2比较简单,但还是被虐得体无完肤...Orz.两个小时,共6道题.最后只AC ...

  6. PHP+MySQL无限级分类(非递归)

    要实现无限级分类,递归一般是第一个也是最容易想到的,但是递归一般被认为占用资源的方法,所以很多系统是不考虑使用递归的 本文还是通过数据库的设计,用一句sql语句实现 数据库字段大概如下: 字段 说明 ...

  7. swift 异步加载图片

    import UIKit @UIApplicationMain class AppDelegate: UIResponder, UIApplicationDelegate { var window: ...

  8. oracle object_id和data_object_id的区别

    Oracle的数据字典表dba_objects包含了两个字段,object_id, data_object_id,官方文档上的解释是: object_id: Dictionary object num ...

  9. Bucket Sort - leetcode [桶排序]

    桶排序(Bucket sort)或所谓的箱排序,是一个排序算法,工作的原理是将数组分到有限数量的桶里.每个桶再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序).桶排序是鸽巢排序 ...

  10. Spring源码:IOC原理解析(一)

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! IOC(Inversion of Control),即控制反转,意思是将对象的创建和依赖关系交给第三方容器处理,我们要用的时候告诉容器我们 ...