under writing websocket

Author: Ducasse

Chapters/18-WebSockets/websockets.pillar

@@ -0,0 +1,132 @@
+!! WebSockets
+@cha:websockets
+
+DRAFT
+
+!!! Concepts
+
+!!! Architecture
+
+!!! Studying a real case
+
+*https://github.com/TelescopeSt/TelescopeCytoscape*
+
+This project allow one to create a model of visualization (nodes and their
+contents, layouts, interactions, and update mechanism) then to render it
+with the CytoscapeJs visualization framework.
+
+The Seaside part is really small. We just use Seaside to render an empty
+div and initialize a cytoscape visualization inside. We could probably
+do without Seaside but we did this project for a Seaside application.
+(And we use the existing callbacks mechanism).
+
+During the rendering we open a web socket and we generate the initial
+cytoscape visualization inside the empty div generated by Seaside.
+
+Then when the user interact with the visualization, it communicates the
+interactions via the web socket to the Pharo server and if it should
+impact the visualization, commands to do so are sent via the websocket
+to the client.
+
+In this project the main part for the websocket management are:
+
+- TLCytoscapeComponent : The Seaside component registering the
+visualization
+(*https://github.com/TelescopeSt/TelescopeCytoscape/blob/development/src/Telescope-Cytoscape/TLCytoscapeComponent.class.st*)
+- TLCytoscapeWebSocketDelegate : The class managing the websocket server
+side
+(*https://github.com/TelescopeSt/TelescopeCytoscape/blob/development/src/Telescope-Cytoscape/TLCytoscapeWebSocketDelegate.class.st*)
+- CYSFileLibrary>>cytoscapeTelescopeJs : The javascript managing the
+socket client side
+(*https://github.com/TelescopeSt/TelescopeCytoscape/blob/development/src/Telescope-Cytoscape-Libraries/CYSFileLibrary.class.st#L539*)
+
+
+!!! The Component Part
+
+[[[
+TLCytoscapeComponent >> visuDivId [
+	visuDivId ifNil: [ visuDivId:= self class nextId ].
+	^ visuDivId
+]
+]]]
+
+[[[
+TLCytoscapeComponent >> visuDivId: anObject [
+	visuDivId := anObject
+]
+]]]
+
+
+
+
+
+[[[
+TLCytoscapeComponent >> renderContentOn: html [
+	| visuId div callback |
+	visuId := self visuDivId.
+	div := html div
+		id: visuId;
+		style: self style;
+		attributeAt: #isTelescopeVisu put: 'true';
+		attributeAt: #'data-port' put: self webSocketPort;
+		class: 'telescopeVisu';
+		with: [ html div
+				class: 'visualization';
+				style: 'height: 100%; width: 100%;'.
+			self waitingMessage value: html.
+			self renderOptionalButtonsOn: html ];
+		yourself.
+	callback := WAValueCallback new.
+	TLCytoscapeWebSocketDelegate
+		registerVisualization: self visualization
+		underId: visuId
+		withCallBack: callback
+		callbackUrl:
+			{html actionUrl asString.
+			(div storeCallback: callback)}
+]
+]]]
+
+[[[
+TLCytoscapeComponent >> renderOptionalButtonsOn: html [
+	html div
+		class: 'fitButton';
+		with: [ self renderResetButtonOn: html.
+			self exportStrategy renderDownloadButtonForVisu: self visuDivId on: html ]
+]
+
+]]]
+
+[[[
+TLCytoscapeComponent >> renderResetButtonOn: html [
+	html anchor
+		onClick: 'telescope.visuWithId(' , self visuDivId asString , ').fit();';
+		with: 'Reset'
+]
+]]]
+
+
+!!! Websocket server side
+
+The class managing the websocket server
+side (from *https://github.com/TelescopeSt/TelescopeCytoscape/blob/development/src/Telescope-Cytoscape/TLCytoscapeWebSocketDelegate.class.st*)
+
+[[[
+ZnWebSocketDelegate subclass: #TLCytoscapeWebSocketDelegate,
+	instVars: 'visualizationByIdDictionary websocketByVisu'
+	classInstVars: 'singleton development serverPort clientPort'
+]]]
+
+
+
+TLCytoscapeWebSocketDelegate class >> registerVisualization: aTLVisualization underId: aDivId withCallBack: aCallBack callbackUrl: callbackUrl [
+	self ensureServerIsRunning.
+	self singleton delegate
+		registerVisualization: aTLVisualization
+		underId: aDivId
+		withCallBack: aCallBack
+		callbackUrl: callbackUrl
+]
+
+
+