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中加 ...
随机推荐
- PHP控制前台弹出对话框
应用场景: 微信授权登录过程中,需要用户确认,故衍生此需求: 相应的逻辑不放在前端的原因是,此部分逻辑属于偏功能业务,所以放在后端,方便统一管理. 解决办法: 通过php echo出javascrip ...
- SharePoint 门户添加内网域名
原理:在DNS服务器上,添加一条SharePoint门户所在主机的别名,当我们在浏览器里访问这个别名的时候,会自动到Dns去解析,解析出来这台主机,从而访问到我们的SharePoint门户. 1.打开 ...
- 【转】Hadoop web页面的授权设定
转载自过往记忆(http://www.iteblog.com/)本文链接地址: <Hadoop web页面的授权设定>(http://www.iteblog.com/archives/98 ...
- [stl] SGI STL的空间配置器
第一级空间配置器 第一级配置以malloc(), free(), realloc()等c函数执行实际的内存配置,释放.重配置操作,并实现出类似c++ new handler的机制.它不能直接使用c++ ...
- Sublime Text 最佳插件列表(转)
Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. Sublime Tex ...
- 基础学习day11--多线程一线程的创建，运行，同步和锁
一.线程基本概述 1.1.进程和线程 进程:一个应用程序一般都是一个进程,正在进行的程序 每一个进程最少都有一个线程,都有一个执行顺序,该顺序是一个执行路径或者一个控制单元 线程:进程中一个独立的控制 ...
- 深入理解java虚拟机（5）---字节码执行引擎
字节码是什么东西? 以下是百度的解释: 字节码(Byte-code)是一种包含执行程序.由一序列 op 代码/数据对组成的二进制文件.字节码是一种中间码,它比机器码更抽象. 它经常被看作是包含一个执行 ...
- MongoDB 的 GridFS 详细分析
GridFS简介 GridFS是MongoDB中的一个内置功能,可以用于存放大量小文件. http://www.mongodb.org/display/DOCS/GridFS http://www.m ...
- [QualityCenter]设置工作流脚本-设置不同字段值关联不同列表
需求:当选择A字段某个值时,设置B字段的列表值根据A字段的值来判断读取不同的列表值,如当运行省份的值已更改, 运行地区的选择列表将更改. 在脚本编辑器新建一个函数UserFuntion_Bug_Pro ...
- 水溶彩铅的特点&技法运用
工欲善其事必先利其器!亲爱的同学们都准备好画笔了吗?今天,助助为同学们介绍一下水溶性彩色铅笔的特点,技法运用的基本教程,请仔细看哟! [水溶性彩色铅笔的特点] 能够同时画出像铅笔一样的线条和水彩一样的 ...