HTML5-WebSocket技术学习(2)
上一篇介绍了websocket的基本用法.这篇介绍websocket的一个框架: socket.io
socket.io是一个既可以用在客户端又可以用在服务器端的框架. 本篇介绍socket.io在客户端和node后端的基本用法
首先进入项目的根目录,然后执行 npm install socket.io
客户端:
1.链入socket.io.js:
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
特别注意,不需要创建一个文件夹socket.io,再在里面放入socket.io.js这个文件.
只要在根目录下在npm install socket.io,就可以了.上面两种写法都ok,但是不可以写 src="socket.io.js"
2.创建一个连接:
var iosocket = io.connect();
3.连接事件:
iosocket.on('connect',function(e){...})
4.接收到数据事件:
iosocket.on('message',function(data){
console.log(data)
})
data就是接收到的数据
5.断开连接事件:
iosocket.on('disconnect', function(e){...});
6.向服务器端发送数据:
iosocket.send(data)
data就是要发送的数据
服务器端:
1.获取socket.io模块:
var socketio = require('socket.io')
2.创建一个服务端:
var server = http.createServer(function(req, res) {
...
}).listen(3000, function() {
console.log('Listening at: http://localhost:3000');
});
3.创建服务器端对应的socket:
var io = socketio(server);
4.连接,收发数据:
io.on('connection',function(socket){
socket.on('message',function(data){
console.log('Message Received: ', data);
socket.broadcast.emit('message', data);
})
});
下面举个完整的实例,模拟两人聊天:
index.html:
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<script type="text/javascript" src="http://cdnimg.ocj.com.cn/common/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="socket.io/socket.io.js"></script>
<style>
.bunny {
color:#AF4442
}
.cat {
color:#3170A9
}
</style>
<script>
$(function(){ var name; $('#myName').keypress(function(event) {
if(event.which == 13) {
event.preventDefault();
name = $(this).val();
var myname = $('<p><span class="label label-default">'+name+'</span></p>');
$(this).parent('.form-group').before(myname);
$(this).parent('.form-group').remove(); }
}); var iosocket = io.connect(); iosocket.on('connect', function () {
$('.container').prepend($('<div class="alert alert-success" role="alert">已连接</div>'));
}); iosocket.on('message', function(message) {
var messages = message.split(';');
$('#incomingChatMessages').append($('<li class='+messages[0]+'></li>').text(messages[0]+' say:'+messages[1]));
}); iosocket.on('disconnect', function() {
$('.container').prepend($('<div class="alert alert-danger" role="alert">已断开</div>'));
}); $('#outgoingChatMessage').keypress(function(event) {
if(event.which == 13) {
event.preventDefault();
iosocket.send(name+';'+$('#outgoingChatMessage').val());
$('#incomingChatMessages').append($('<li class='+name+'></li>').text(name+' say:'+$('#outgoingChatMessage').val()));
$('#outgoingChatMessage').val('');
}
});
});
</script>
</head>
<body>
<div class="container"> Incoming Chat: <ul id="incomingChatMessages"></ul>
<br />
<div class="form-group">
<label for="myName">name:</label>
<input type="text" class="form-control" id="myName" placeholder="Enter Your Name">
</div>
<div class="form-group">
<label for="outgoingChatMessage">enter:</label>
<input type="text" class="form-control" id="outgoingChatMessage" placeholder="Enter info">
</div>
</div> </body>
</html>
分析:
1.创建一个name变量,用于保存用户输入的昵称.在这里都是虚假数据,所以只能输入cat,或者bunny(因为定义的样式是这两个类名),其中,cat发送的消息是蓝色的,bunny发送的消息是红色的.
2.先输入用户名,保存当前用户名(相当于聊天中的登录)
3.创建socket
4.连接成功的时候,显示提示"已连接"
5.接收数据成功的时候,把接收到的对方发送的消息插入到聊天对话中
6.按回车键发送消息,把自己发送的消息也插入到聊天对话中
7.连接断开的时候,显示提示"已断开"
app.js:
var fs = require('fs')
, http = require('http')
, socketio = require('socket.io');
var server = http.createServer(function(req, res) {
res.writeHead(200, { 'Content-type': 'text/html'});
res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(3000, function() {
console.log('Listening at: http://localhost:3000');
});
var io = socketio(server);
io.on('connection',function(socket){
socket.on('message',function(data){
console.log('Message Received: ', data);
socket.broadcast.emit('message', data);
})
});
分析:
1.获取socket.io模块
2.创建服务器端,读取index.html内容.
3.创建socket.io的实例,传入server
4.监听connection事件,添加回调
5.监听message事件,添加回调,把接收到的信息再发出去
这个demo运行以后大概是这样的:
打开一个火狐,一个chrome:
分别输入用户名,cat和bunny:
输入用户名后:
然后就猫猫和兔兔就可以开始聊天啦~~
今天就到这里,socket.io还有很多api,很多其他用法,以后会不断深入研究~~~
完整代码:https://github.com/OOP-Code-Bunny/html5/tree/master/nodeWebsocket
HTML5-WebSocket技术学习(2)的更多相关文章
- HTML5 WebSocket 技术介绍
WebSocket是html5规范新引入的功能,用于解决浏览器与后台服务器双向通讯的问题,使用WebSocket技术,后台可以随时向前端推送消息,以保证前后台状态统一,在传统的无状态HTTP协议中,这 ...
- Demo源码放送：打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
- 打通B/S与C/S ！让HTML5 WebSocket与.NET Socket公用同一个服务端！
随着HTML5 WebSocket技术的日益成熟与普及,我们可以借助WebSocket来更加方便地打通BS与CS -- 因为B/S中的WebSocket可以直接连接到C/S的服务端,并进行双向通信.如 ...
- WebSocket+MSE——HTML5 直播技术解析
作者 | 刘博(又拍云多媒体开发工程师) 当前为了满足比较火热的移动 Web 端直播需求,一系列的 HTML5 直播技术迅速的发展起来. 常见的可用于 HTML5 的直播技术有 HLS.WebSock ...
- 对WebSocket技术的学习与探索(二)
近日重新开始学习WebSocket技术,什么是WebSocket,在<对WebSocket技术的学习与探索(一)>文章中已经说明白了,还没理解可以看看这篇文章http://www.ruan ...
- 对WebSocket技术的学习与探索(一)
WebSocket 简要介绍 WebSocket protocol 是HTML5一种新的协议. 它实现了浏览器与服务器全双工通信(full-duple). 一开始的握手需要借助HTTP请求完成. We ...
- 绝版珍珍藏：web前端技术学习指南
绝版珍珍藏:web前端技术学习指南 优秀的Web前端开发工程师要在知识体系上既要有广度和深度!应该具备快速学习能力. 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的 ...
- 常用的Websocket技术一览
1. 前言 Websocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据 ...
- IT软件人员的技术学习内容（写给技术迷茫中的你） - 项目管理系列文章
前面笔者曾经写过一篇关于IT从业者的职业道路文章(见笔者文:IT从业者的职业道路(从程序员到部门经理) - 项目管理系列文章).然后有读者提建议说写写技术方面的路线,所以就有了本文.本文从初学者到思想 ...
- WebSocket技术
webSocket技术 在html5技术革新中,加入了WebSocket技术 1.webSocket实际是TCP连接 webSocket在最初将发送http连接请求到服务器端, 但是在header中加 ...
随机推荐
- 【github】github 使用教程初级版
github 是一个基于 git 的代码托管平台,付费用户可以建私人仓库,免费用户只能使用公共仓库.对于一般人来说公共仓库就已经足够了,而且也没多少代码来管理.下面简单介绍如何使用 github,供初 ...
- [ javascript New Image() ] New Image() 对象讲解
创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src="xxx.gif"; 这样做就相当于给浏览器缓存了一张图片. 图 ...
- SharePoint 2013 JQuery Asset Picket
var b = new AssetPickerConfig(""); b.ClientID = ""; b.DefaultAssetLocation = & ...
- Purchase购物车实例分析
源代码下载地址:http://code4app.com/ios/55655def933bf09d328b5141 此源代码从中学到以下四个知识点 第一:关于右边只有一个被选中的效果展现,左边部分代码内 ...
- android项目中gen目录不能自动生成R.java的原因
1.调用的资源文件不存在:xml文件中有些控件没有关联引用:把项目缺少的文件加上,包括资源文件,如 values中的strings.xml或者图片等资源. 2.项目中缺少必须的系统文件(比如:defa ...
- IOS MenuController的部分操作
这里我们要实现的将是选择按钮的自定义 综合上一节的随笔,这里给出效果图. ViewController.m // // ViewController.m // CX-MenuController // ...
- iOS 秒数转换成时间,时，分，秒
//转换成时分秒 - (NSString *)timeFormatted:(int)totalSeconds{ int seconds = totalSeconds % 60; int min ...
- 为Xcode添加和备份快捷代码
有IOS开发经验的,相信你一定了解快捷代码的使用以及可以自定义代码,备份到XCode右下角,供下次使用. 那么,快捷代码备份到本地什么位置呢: 位置:~/Library/Developer/Xcode ...
- Swift基础之闭包
内容纲要: 1.闭包基础 2.关于闭包循环引用 正文: 1.闭包 闭包是自包含的函数代码块,可以在代码中被传递和使用.Swift 中的闭包与 C 和 Objective-C 中的代码块(blocks) ...
- spring生命周期
Github地址 最近在整合mybatis-spring. 公司里面已经有一个叫做kylin-datasource的开发包,以前能够提供master和slave2个数据源,最近更新了2.0版本,支持自 ...