内容简介:使用socket.io与express结合,体验websocket
前言
自己于express框架的基础上,以node为服务端,基于 socket.io ,实现了一个建议的聊天室。
成功从服务端推送数据到客户端。
效果如下图:

将客户端的信息传递到服务端后,服务端主动推送给客户端。
websocket原理
简单来说,就是服务端主动推送信息给客户端。看看其与http协议的区别:

websocket有如下特点:
其他特点包括:
(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据。
(5)没有同源限制,客户端可以与任意服务器通信。
(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。
ws://example.com:80/some/path
可以看看理解:

服务端实现
服务端是基于node的web框架express,在其基础上,使用socket.io模块来实现的。
首先安装socket.io:
npm install --save-dev socket.io
然后在对应的模块监听:
var express = require('express'); var router = express.Router(); var app = require('express')(); var server = require('http').createServer(app); var io = require('socket.io')(server); io.on('connection', function(socket){ console.log('a user connected'); socket.on("disconnect", function() { console.log("a user go out"); }); socket.on("message", function(obj) { //延迟3s返回信息给客户端 setTimeout(function(){ console.log('the websokcet message is'+obj); io.emit("message", obj); },3000); }); }); //开启端口监听socket server.listen(3001); router.get('/imRoom', function(req, res, next) { res.render('im/imRoom'); }); module.exports = router;
客户端
客户端也需要对应引入一个socket.io.js文件。
define(['jquery','socketIo'],function(jq,io){ var sendNode = jq('.j-send'); var btnNode = jq('.j-btn'); var contentNode = jq('.j-content'); //建立连接 socket = io.connect('ws://127.0.0.1:3001'); btnNode.on('click',function(){ var sendText = sendNode.val(); //向服务端发送信息 socket.emit("message", {msg:sendText}); }); //接收服务端推送的信息 socket.on("message", function(obj) { var curContent = contentNode.html(); contentNode.html(curContent+obj.msg); }); });
看起来是不是很简单就实现了。其实websocket的使用还需要考虑很多因素,比如性能、负载等等。这里只是简单的体验了一些。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 代理模式——结合SpringAOP讲解
- 如何结合 Scrum 和 Kanban
- NServiceBus 结合 RabbitMQ 使用教程
- ActiveMQ结合Spring收发消息
- quicklink学习以及结合React
- 业务流程与软件架构的结合
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Smashing Book
Jacob Gube、Dmitry Fadeev、Chris Spooner、Darius A Monsef IV、Alessandro Cattaneo、Steven Snell、David Leggett、Andrew Maier、Kayla Knight、Yves Peters、René Schmidt、Smashing Magazine editorial team、Vitaly Friedman、Sven Lennartz / 2009 / $ 29.90 / € 23.90
The Smashing Book is a printed book about best practices in modern Web design. The book shares technical tips and best practices on coding, usability and optimization and explores how to create succes......一起来看看 《The Smashing Book》 这本书的介绍吧!