Skip to content

Latest commit

 

History

History

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 

README.md

认识 soket.io

如果对 socket 没有了解的先复习下。 soket.io 可以理解为对 WebSocket 的一种封装。好比前端的 jQuery 对原生 javascript 的封装。 soket.io 依靠事件驱动的模式,灵活的使用了自定义事件和调用事件来完成更多的场景,不必依赖过多的原生事件。

服务端 API

  • 安装第三方模块 npm install express socket.io
  • 开户 Socket 服务器,端口为 88
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
http.listen(88);
  • 用 on 来进行事件监听和定义事件
  • connection:监听客户端连接,回调函数会传递本次连接的socket
  • emit:触发用客户端的事件
io.on('connection', function(client){
	//把当前登录的用户保存到对象 onlinePersons,并向所有在线的用户发起上线提示
    //serverLogin 为自定义事件,供客户端调用
	client.on('serverLogin', function(_person){
		var _personObj = JSON.parse(_person);
		onlinePersons[_personObj.id] = _personObj;
		//向所有在线的用户发起上线提示
		//触发客户端的 clientTips 事件
        //clientTips 为客户端的自定义事件
		io.emit('clientTips', JSON.stringify(onlinePersons));
	})

	//当监听到客户端有用户在移动,就向所有在线用户发起移动信息,触发客户端 clientMove 事件
    //serverMove 为自定义事件,供客户端调用
	client.on('serverMove', function(_person){
		var _personObj = JSON.parse(_person);
		onlinePersons[_personObj.id] = _personObj;
		console.log('serverLogin', onlinePersons);
        //clientTips 为客户端的自定义事件
		io.emit('clientMove', _person);
	});
})

客户端 API

  • 因为 socket.io 是对 websocket 的二次封装,所以需要先引入 socket.io 的 js 库。
  • 创建和服务器的连接 var socket = io.connect('ws://localhost:88');
  • 连接成功后通过 emit 调用服务端的事件 socket.emit('serverLogin', JSON.stringify(person));
  • 在客户端也同样用 on 来定义事件供服务端调用 socket.on('clientTips', function(){})

项目应用

该案例是模仿在线游戏 运行步骤

  • npm install express socket.io
  • node socketServer

案例思路

  • 服务端开启服务
  • 在服务端监听客户端的连接 io.on('connection', function(client){})
  • 在服务端定义上线的事件 client.on('serverLogin', function(_person){}),然后将上线的用户属性保存起来
  • 客户端连接服务端 socket = io.connect('ws://localhost:88');
  • 连接成功后将上线的属性发给服务端 socket.emit('serverLogin', JSON.stringify(person));
  • 服务端接收到客户端上线的用户属性,保存在对象 onlinePersons 上并将此用户广播给所有在线的客户端 io.emit('clientTips', JSON.stringify(onlinePersons));
  • 客户端接收到来自服务端的新用户,则自动根据属性创建人物 socket.on('clientTips', function(){})
  • 角色在游戏中移动也是反复将坐标发送给服务器,服务器将新的坐标广播给所有在线的客户端,然后客户端便根据新的坐标移动人物。