2. WebAgent
2

3. 3

4. 4

5. 5

6. 6

7. 7

8. 8

9. Синхронизация
9

10. 10

11. 11

12. 12

13. 13

14. 14

15. 15

16. 16

17. 17

18. 18

19. 19

20. 20

21. 21

22. 22

23. Зачем?
23

24. 24

25. 25

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

32. 32

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39

40. Синхронизация интерфейса
40

41. Транспорт:
41

42. Транспорт:
1. Сервер
42

43. Транспорт:
1. Сервер
2. Flash
43

44. Транспорт:
1. Сервер
2. Flash
3. Клиентские хранилища
44

45. Возможные подходы:
45

46. Возможные подходы:
1. События
46

47. Возможные подходы:
1. События
2. Состояния
47

48. Возможные подходы:
1. События
2. Состояния
3. Смешанные
48

49. Возможные подходы:
1. События
2. Состояния
3. Смешанные
49

50. 50

51. 51

52. Сервер - WebAgent1.0 :
52

53. Сервер - WebAgent1.0 :
• Синхронизация смешанная
53

54. Client
54

55. Client Client Client Client Client
55

56. Client Client Client Client Client
Server
56

57. Client Client Client Client Client
Server
57

58. Client Client Client Client Client
Server
58

59. Client Client Client Client Client
Server
59

60. Client Client Client Client Client
Server
60

61. Client Client Client Client Client
Server
61

62. Client Client Client Client Client
Server
62

63. Client Client Client Client Client
Server
63

64. Сервер - WebAgent1.0 :
• Синхронизация смешанная
64

65. Сервер - WebAgent1.0 :
• Синхронизация смешанная
Минусы:
65

66. Сервер - WebAgent1.0 :
• Синхронизация смешанная
Минусы:
• Сетевые задержки
66

67. Client Client Client Client Client
Server
67

68. Client Client Client Client Client
Server
68

69. Client Client Client Client Client
Server
69

70. Client Client Client Client Client
Server
70

71. Client Client Client Client Client
Server
71

72. Сервер - WebAgent1.0 :
• Синхронизация смешанная
Минусы:
• Сетевые задержки
72

73. Сервер - WebAgent1.0 :
• Синхронизация смешанная
Минусы:
• Сетевые задержки
• Много соединений с
сервером
73

74. Flash – WebAgent 2.0 :
74

75. Flash – WebAgent 2.0 :
• Диспетчер в клиенте – router
75

76. Flash – WebAgent 2.0 :
• Диспетчер в клиенте – router
• Есть хранилище, возможна
синхронизация состояний
76

77. Flash – WebAgent 2.0 :
• Диспетчер в клиенте – router
• Есть хранилище, возможна
синхронизация состояний
• Синхронизация событиями
77

78. LocalConnection
78

79. 79

80. 80

81. 81

82. 82

83. 83

84. 84

85. 85

86. 86

87. 87

88. Router
88

89. Client Client Client Client Client
89

90. Client Client Client Client Client
Fl Fl Fl Fl Fl

91. Client Client Client Client Client
Fl Fl Fl Fl Fl
Router

92. Client Client Client Client Client
Fl Fl Fl Fl Fl
Router
Server
92

93. Client Client Client Client Client
Fl Fl Fl Fl Fl
Router
Server
93

94. Client Client Client Client Client
Fl Fl Fl Fl Fl
Router
Server
94

95. Client Client Client Client Client
Fl Fl Fl Fl Fl
Router
Server
95

96. Flash – WebAgent 2.0 :
• Диспетчер в клиенте – router
• Есть хранилище, возможна
синхронизация состояний
• Синхронизация событиями
96

97. Flash – WebAgent 2.0 :
• Диспетчер в клиенте – router
• Есть хранилище, возможна
синхронизация состояний
• Синхронизация событиями
Минусы :
97

98. Flash – WebAgent 2.0 :
• Диспетчер в клиенте – router
• Есть хранилище, возможна
синхронизация состояний
• Синхронизация событиями
Минусы :
• Глюки флеша
98

99. Flash – WebAgent 2.0 :
“Подводные камни”:
99

100. Flash – WebAgent 2.0 :
“Подводные камни”:
• Хрупкость системы
100

101. 101

102. 102

103. WebStorage – WebAgent 3.0 :
103

104. WebStorage – WebAgent 3.0 :
• Синхронизация состояний
104

105. Синхронизация состояний
105

106. Router
106

107. Router

108. Router

109. Router

110. Router
110

111. Router
111

112. 112

113. 113

114. 114

115. 115

116. 116

117. 117

118. 118

119. WebStorage – WebAgent 3.0 :
• Синхронизация состояний
119

120. WebStorage – WebAgent 3.0 :
• Синхронизация состояний
• Задача выбора роутера
120

121. Выбор роутера
121

122. 122

123. 123

124. 124

125. 125

126. 126

127. router
127

128. router
128

129. router
129

130. router
Write(window_id)
130

131. router
Write(window_id)
131

132. router
Write(window_id)
132

133. Write(window_id)
133

134. router
Write(window_id)
134

135. router
Write(window_id)
135

136. router
Write(window_id)
onbeforeunload
136

137. router
Write(window_id)
onbeforeunload
Write(false)
137

138. router
Write(window_id)
onbeforeunload
Write(false)
onstorage
138

139. 139

140. 140

141. Read(window_id)
141

142. Read(window_id)
142

143. Read(window_id)
143

144. 144

145. 145

146. 146

147. 147

148. 148

149. WebStorage – WebAgent 3.0 :
• Синхронизация состояний
• Задача выбора роутера
149

150. WebStorage – WebAgent 3.0 :
• Синхронизация состояний
• Задача выбора роутера
“Подводные камни”:
150

151. WebStorage – WebAgent 3.0 :
• Синхронизация состояний
• Задача выбора роутера
“Подводные камни”:
• Баги реализации в браузерах
151

152. Баги реализации в браузерах:
152

153. Баги реализации в браузерах:
• onstorage
153

154. onStorage
154

155. localStorage.testvar = 0;
155

156. localStorage.testvar = 0;
for(var i = 0; i < 3; i++) {
}
156

157. localStorage.testvar = 0;
for(var i = 0; i < 3; i++) {
localStorage.testvar++;
}
157

158. localStorage.testvar = 0;
console.log(localStorage.testvar);
for(var i = 0; i < 3; i++) {
localStorage.testvar++;
console.log(localStorage.testvar);
}
158

159. window.addEventListener(„storage‟, function (e) {
}, true)
159

160. window.addEventListener(„storage‟, function (e) {
console.log(e.key)
}, true)
160

161. window.addEventListener(„storage‟, function (e) {
console.log(e.key, e.newValue )
}, true)
161

162. window.addEventListener(„storage‟, function (e) {
console.log(e.key, e.newValue, e.oldValue)
}, true)
162

163. window.addEventListener(„storage‟, function (e) {
console.log(e.key, e.newValue, e.oldValue,
localStorage.testvar)
}, true)
163

164. 164

165. for (…
165

166. for (… addEvent…
166

167. 167

168. Chrome, Opera, FF6+

169. Chrome, Opera, FF6+
Таб 1 – цикл
169

170. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
170

171. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0
171

172. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0
1
172

173. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0
1
2
173

174. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0
1
2
3
174

175. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1
2
3
175

176. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1
2
3
176

177. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1
2
3
177

178. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1
2
3
178

179. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1
2
3
179

180. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1
2
3
180

181. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1
2
3
181

182. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1 testvar 1 0 3
2
3
182

183. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1 testvar 1 0 3
2 testvar 2 1 3
3
183

184. Chrome, Opera, FF6+
Таб 1 – цикл Таб 2 – addEventList…
0 testvar 0 null 3
1 testvar 1 0 3
2 testvar 2 1 3
3 testvar 3 2 3
184

185. Многозадачность
185

186. Многозадачность:
• Chrome и IE – в каждом табе / окное
186

187. Многозадачность:
• Chrome и IE – в каждом табе / окное
• Opera – в каждом iframe
187

188. Многозадачность:
• Chrome и IE – в каждом табе / окное
• Opera – в каждом iframe
• FF – один на все окна / табы
188

189. 189

190. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
190

191. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0
191

192. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
192

193. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
193

194. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
194

195. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
195

196. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
196

197. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
197

198. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
198

199. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
1
199

200. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
1 undef undef undef 1
200

201. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
1 undef undef undef 1
2
201

202. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
1 undef undef undef 1
2 undef undef undef 2
202

203. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
1 undef undef undef 1
2 undef undef undef 2
3
203

204. FF3.6
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 0
1 undef undef undef 1
2 undef undef undef 2
3 undef undef undef 3
204

205. 205

206. IE8
Таб 1 – цикл Таб 2 – addEventList…
206

207. IE8
Таб 1 – цикл Таб 2 – addEventList…
0
207

208. IE8
Таб 1 – цикл Таб 2 – addEventList…
0
1
208

209. IE8
Таб 1 – цикл Таб 2 – addEventList…
0
1
2
209

210. IE8
Таб 1 – цикл Таб 2 – addEventList…
0
1
2
3
210

211. IE8
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 3
1
2
3
211

212. IE8
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 3
1
2
3
212

213. IE8
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 3
1
2
3
213

214. IE8
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 3
1
2
3
214

215. IE8
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 3
1
2
3
215

216. IE8
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 3
1
2
3
216

217. IE8
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 3
1 undef undef undef 3
2
3
217

218. IE8
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 3
1 undef undef undef 3
2 undef undef undef 3
3
218

219. IE8
Таб 1 – цикл Таб 2 – addEventList…
0 undef undef undef 3
1 undef undef undef 3
2 undef undef undef 3
3 undef undef undef 3
219

220. Баги реализации в браузерах:
• Onstorage
220

221. Баги реализации в браузерах:
• Onstorage
• IE8+
221

222. Нюансы IE8+:
222

223. Нюансы IE8+:
• Асинхронные тормоза на записи
223

224. Нюансы IE8+:
• Асинхронные тормоза на записи
• Отложенный момент записи на диск
224

225. Нюансы IE8+:
• Асинхронные тормоза на записи
• Отложенный момент записи на диск
• Данные могут разъехаться
225

226. Нюансы IE8+:
• Асинхронные тормоза на записи
• Отложенный момент записи на диск
• Данные могут разъехаться
• 64 IE на 64 Win
226

227. 227

228. СПАСИБО!
Роман Митасов
Программист, WebAgent
mitasov@corp.mail.ru