socket.io使用

Socket.io服务端对象

const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server); //服务端的Socket.io对象

Socket.io客户端对象

  <!-- 需要加载socket.io客户端第三方库 --><script type="text/javascript" src="/socket.io/socket.io.js"></script><script>const socket = io(); //Socket.io客户端对象</script>

socket.io事件
- socket.io服务器的系统事件
  1. io.on(‘connection’, callback): 有新Socket连接建立时
  2. socket.on(‘message’, callback): 当有socket..send()方法发送完信息后触发
  3. socket.on(‘disconnect’, callback): 当连接断开时触发
- 客户端的系统事件
  1. socket.io.on(‘open’, callback): 当socket客户端开启与服务器的新连接时触发
  2. socket.io.on(‘connect’, callback):当socket客户端连接到服务器后触发
  3. socket.io.on(‘connect_timeout’, callback):当socket客户端与服务器连接超时后触发
  4. socket.io.on(‘connec_errort’, callback):当socket客户端连接服务器失败时触发
  5. socket.io.on(‘connec_attemptt’, callback):当socket客户端尝试重新连接到服务器后触发
  6. socket.io.on(‘reconnect’, callback):当socket客户端重新连接到服务器后触发
  7. socket.io.on(‘reconnect_error’, callback):当socket客户端重新连接服务器失败后触发
  8. socket.io.on(‘reconnect_fail’, callback):当socket客户端重新连接到服务器失败后触发
  9. socket.io.on(‘close’, callback):当socket客户端关闭与服务器的连接后触发
事件触发
- 服务端触发
- 客户端触发

/*服务端*/io.on('connection', function (socket) {socket.emit('customEvent', message);});

<!--客户端-->
<script>
var socket = io();
socket.emit('customEvent', mesaage);
</script>

事件处理

/*服务端*/
io.on('connection', function (socket) {socket.on('customEvent', (message) => {/*逻辑代码*/}
});//通过broadcast属性可以给处理当前连接外的所有连接的socket客户端发送事件:
io.on('connection',(socket)=>{socket.broadcast.emit('customEvent', meassage);
});

<!--客户端-->
<script>var socket =io();socket.on('eventName',(message)=>{/逻辑代码*/});
</script>

socket.io命名空间:对socker连接进行划分命名空间,可以对不同的socket的连接分类管理,而且不需要新建socket服务器实例.

//服务端命名空间
io.of('/someNameSpace').on('connection', (socket)=>{socket.on('customEvent', (message)=>{/*逻辑代码*/});
});

<!--客户端命名空间-->
<script>var someSocket = io('/someNameSpace');someSocket.on('customEvent', (message)=>{/*逻辑代码*/});
</script>

Socket.io的房间:房间功能动态的对已连接的socket进行分组.socket连接可以加入和离开房间

io.on('connection', (socket)=>{  //加入房间socket.on('join', (roomData)=>{socket.join(roomData.roomName);});socket.on('leave', (roomData)=>{  //离开房间socket.leave(roomData.roomName);});
});//房间中触发事件
io.on('connection', (socket)=>{   //对房间所有socket连接io.in('someRoom').emit('customEvent', message);
});//对房间内除了当前连接外的socket触发事件
io.on('connection', (socket)=>{   //对房间所有socket连接io.broadcast.to('someRoom').emit('customEvent', message);
});

服务端:使用了express框架搭建,socket.io将借住express服务来实现用户验证,同步会话;

express.js/*socket.io实时通讯的使用*/
const socketio = require('socket.io'),http = require('http'),MongoStore = require('connect-mongo')(session); //当作会话数据储存module.exports = function() {var server = http.createServer(app);  //使用新的server替换以前的express应用对象var io = socketio.listen(server);   //将soket.io服务附加给server
//创建MonggoStore的实例,并传入了Mongoose的连接对象var mongoStore = new MongoStore({url: config.db});app.use(session({    //配置session,存储到mongo数据库中saveUninitialized: false, //是否自动保存未初始化的会话,建议falseresave: false,      //是否每次都重新保存会话,建议falsesecret: config.sessionSecret,store: mongoStore,cookie: {maxAge: config.minute}}));require('./socketio')(server, io, mongoStore); //为server和io,配置处理客户端信息的处理
}socketio.js

'use strict';var config = require('./config'),cookieParser = require('cookie-parser'),passport = require('passport');module.exports = function (server, io, mongoStore) {io.use(function (socket, next) {  //使用cookieParser来解析握手请求中的cookie,并且获取对应express中的sessionIdcookieParser(config.sessionSecret)(socket.request, {}, function (err) {var sessionId = socket.request.signedCookies['connect.sid'];//使用mongoStore检索会话信息mongoStore.get(sessionId, function (err, session) {socket.request.session = session;//一旦检索到就用passport.initialize()和passport.session()中间件根据会话//信息来填充会话的user对象passport.initialize()(socket.request, {}, function () {passport.session()(socket.request, {}, function () {if(socket.request.user) {next(null, true);} else {next(new Error('User is not authenticated'), false);}});});});});});io.on('connection', function (socket) { //监听新连接,有的话调用处理函数require('../app/controllers/chat.server.controller')(io, socket);});
};chat.server.controller.js

'use strict';
module.exports = function (io, socket) {io.emit('chatMessage', {    //通过io对象向所有监听'chatMessage'事件的客户端发送消息type: 'status',text: 'connencted',created: Date.now(),username: socket.request.user.username});socket.on('chatMessage', (message) => { //监听socket客户端'chatMeaasge'事件message.type = 'message';message.created = Date.now();message.username = socket.request.user.username;io.emit('chatMessage', message);});socket.on('disconnect', () => {    //监听socket客户端与服务器断开建立的事件,并且触发回调io.emit('chatMessage', {type: 'status',text: 'disconnected',created: Date.now(),username: socket.request.user.username});});
};

客户端:使用的是Angular1.x的前端框架

chat.client.service.jsangular.module('chat').service('Socket', ['Authentication', '$location', '$timeout', function (Authentication, $location, $timeout) {if(Authentication.user) {   //判断是否有用户登陆this.socket = io();} else {$location.path('/');}this.on = function (eventName, callback) {  //监听evetName事件if(this.socket) {           //判断io()是否实例化;this.socket.on(eventName, function (data) {$timeout(function () {  //socket客户端是第三方库,需要用$timeout触发Angular的绑定操作callback(data);});});}}this.emit = function (eventName, data) {   //触发eventName事件if(this.socket) {this.socket.emit(eventName, data);}}this.removeListener = function (eventName) {    // 取消eventName事件监听if(this.socket) {this.socket.emit(eventName);}}}]);chat.client.controller.jsangular.module('chat').controller('ChatController', ['$scope', 'Socket',function ($scope, Socket) {var self = this;$scope.messages = [];Socket.on('chatMessage', function (message) {$scope.messages.push(message);});$scope.sendMessage = function () {console.log(self.messageText);var message = {text: self.messageText,}Socket.emit('chatMessage', message);self.messageText = '';}$scope.destory = function () {  //离开聊天室Socket.removeListener('chatMessage');}
}]);index.html<!-- 需要加载socket.io客户端第三方库 -->
<script type="text/javascript" src="/socket.io/socket.io.js"></script>

socket.io使用相关推荐

phaser.min.js_如何使用Phaser 3，Express和Socket.IO构建多人纸牌游戏
phaser.min.js I'm a tabletop game developer, and am continually looking for ways to digitize game ex ...
node mongoose_如何使用Express，Mongoose和Socket.io在Node.js中构建实时聊天应用程序
node mongoose by Arun Mathew Kurian 通过阿伦·马修·库里安(Arun Mathew Kurian) 如何使用Express,Mongoose和Socket.io在N ...
dotnet调用node.js写的socket服务（websocket/socket/socket.io）
https://github.com/jstott/socketio4net/tree/develop socket.io服务端node.js,.里面有js写的客户端:http://socket.io ...
vue.js+socket.io打造一个好玩的新闻社区
title: Socket.io+vue打造新闻社区 date: 2017-06-12 20:19:05 tags: [vue.js,javascript,socket.io] vue2.0 + so ...
socket io与vue-cli的结合使用
关于在vue中使用websocket的简易例子使用vue-cli生成一个vue模版安装三个依赖: npm install -s socket.io npm install -s vue-socke ...
使用React、Node.js、MongoDB、Socket.IO开发一个角色投票应用的学习过程（一）
这几篇都是我原来首发在 segmentfault 上的地址:https://segmentfault.com/a/1190000005040834 突然想起来我这个博客冷落了好多年了,也该更新一下,呵 ...
用coffee和socket.io实现的01背包算法
先说说我为什么写这些吧当程序猿太苦逼了,真的,时间久了,真没有搬砖的成就感高,好歹人家能盖栋楼(身材也能练得不错),咱们指不定哪天来个熊孩子把硬盘格了就啥也没了. 这学期明显没把心放在前端上.... ...
socket.io实现在线群聊
我自己在用socket.io开发,对官方网站上的文档,进行简单的整理,然后自己写了一个简单的聊天程序.最最开始先安装socket.io: npm install socket.io 利用Node的搭 ...
koa+mysql+vue+socket.io全栈开发之web api篇
原文地址:koa+mysql+vue+socket.io全栈开发之web api篇目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd ...
socket.io的基本使用
服务端: 1.监听客户端连接: io.on("connection",socket=>{ }); 不分组数据传输:传输对象为当前socket 2.1给该socket所有客户端 ...

socket.io使用

socket.io使用相关推荐

最新文章

热门文章