Web Socket
Web Socket
2021/05/27 (增加連結)
Websocket
WebRTC vs WebSockets Tutorial — Web Real-Time Communication
WebRTC is designed for high-performance media transfer. WebRTC web applications run through a service or transport, through which they exchange network and media data. WebSocket, by contrast, is for communication between client and server.
Nest.js
Building a Realtime Chat in NestJS (Websockets)
React
Full Stack Reactive with Spring WebFlux, WebSockets, and React
Spring WebFlux
Client
Polling with Interval
Polling with RxJS
Real-time Data with WebSockets (supported by web browser)
Listening for Server-Sent Events (SSE)
A Simple Chat App With React, Node and WebSocket
server: node.js with ws
client: WebSocket (supported by web browser)
事件處理 (onopen, onmessage, onclose, onerror)
ws = new WebSocket(URL)
componentDidMount() {
this.ws.onopen = () => {
// on connecting, do nothing but log it to the console
console.log('connected')
}
this.ws.onmessage = evt => {
// on receiving a message, add it to the list of messages
const message = JSON.parse(evt.data)
this.addMessage(message)
}
this.ws.onclose = () => {
console.log('disconnected')
// automatically try to reconnect on connection loss
this.setState({
ws: new WebSocket(URL),
})
}
}
送出訊息
submitMessage = messageString => {
// on submitting the ChatInput form, send the message, add it to the list and reset the input
const message = { name: this.state.name, message: messageString }
this.ws.send(JSON.stringify(message))
this.addMessage(message)
}
Beyond REST: Using WebSockets for two-way communication in your React app
server: node.js with socket.io
client: react with socket.io-client
React Hooks: Managing Web Sockets with useEffect and useState
with socket.io-client
WebSockets in React, the component way!
with SockJS
MAKING REACT REALTIME WITH WEBSOCKETS
with react-pusher
Redux
How to Build a Chat Application using React, Redux, Redux-Saga, and Web Sockets
server side: node.js with ws
client side: react with WebSocket (supported by web browser)
React: Managing Websockets with Redux and Context
React Context vs Redux Store
Socket Manager: Websocket + Context Provider
Integrating Redux with Websocket Events
Node.js
node.js + WebSocket
Java
javax.websocket
@ServerEndpoint(value = "/chat/{username}")
public class ChatEndpoint {
@OnOpen
public void onOpen(Session session) throws IOException {
// Get session and WebSocket connection
}
@OnMessage
public void onMessage(Session session, Message message) throws IOException {
// Handle new messages
}
@OnClose
public void onClose(Session session) throws IOException {
// WebSocket connection closes
}
@OnError
public void onError(Session session, Throwable throwable) {
// Do error handling here
}
}
Create a WebSocket Client in JavaScript
client: WebSocket (supported by web browser)
server: java