WebSockets实战：在 Node 和 React 之间进行实时通信[每日前端夜话0x6C]

1const webSocketsServerPort = 8000;
2const webSocketServer = require('websocket').server;
3const http = require('http');
4// Spinning the http server and the websocket server.
5const server = http.createServer();
6server.listen(webSocketsServerPort);
7const wsServer = new webSocketServer({
8  httpServer: server
9});

 1// I'm maintaining all active connections in this object
 2const clients = {};
 3
 4// This code generates unique userid for everyuser.
 5const getUniqueID = () => {
 6  const s4 = () => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
 7  return s4() + s4() + '-' + s4();
 8};
 9
10wsServer.on('request', function(request) {
11  var userID = getUniqueID();
12  console.log((new Date()) + ' Recieved a new connection from origin ' + request.origin + '.');
13  // You can rewrite this part of the code to accept only the requests from allowed origin
14  const connection = request.accept(null, request.origin);
15  clients[userID] = connection;
16  console.log('connected: ' + userID + ' in ' + Object.getOwnPropertyNames(clients))
17});

1HTTP GET ws://127.0.0.1:8000/ 101 Switching Protocols
2Connection: Upgrade
3Sec-WebSocket-Accept: Nn/XHq0wK1oO5RTtriEWwR4F7Zw=
4Upgrade: websocket

 1import React, { Component } from 'react';
 2import { w3cwebsocket as W3CWebSocket } from "websocket";
 3
 4const client = new W3CWebSocket('ws://127.0.0.1:8000');
 5
 6class App extends Component {
 7  componentWillMount() {
 8    client.onopen = () => {
 9      console.log('WebSocket Client Connected');
10    };
11    client.onmessage = (message) => {
12      console.log(message);
13    };
14  }
15
16  render() {
17    return (
18      <div>
19        Practical Intro To WebSockets.
20      </div>
21    );
22  }
23}
24
25export default App;

1HTTP GET ws://127.0.0.1:8000/ 101 Switching Protocols
2Upgrade: websocket
3Connection: Upgrade
4Sec-WebSocket-Key: vISxbQhM64Vzcr/CD7WHnw==
5Origin: http://localhost:3000
6Sec-WebSocket-Version: 13

 1/* When a user joins, I notify the
 2server that a new user has joined to edit the document. */
 3logInUser = () => {
 4  const username = this.username.value;
 5  if (username.trim()) {
 6    const data = {
 7      username
 8    };
 9    this.setState({
10      ...data
11    }, () => {
12      client.send(JSON.stringify({
13        ...data,
14        type: "userevent"
15      }));
16    });
17  }
18}
19
20/* When content changes, we send the
21current content of the editor to the server. */
22onEditorStateChange = (text) => {
23 client.send(JSON.stringify({
24   type: "contentchange",
25   username: this.state.username,
26   content: text
27 }));
28};

 1componentWillMount() {
 2  client.onopen = () => {
 3   console.log('WebSocket Client Connected');
 4  };
 5  client.onmessage = (message) => {
 6    const dataFromServer = JSON.parse(message.data);
 7    const stateToChange = {};
 8    if (dataFromServer.type === "userevent") {
 9      stateToChange.currentUsers = Object.values(dataFromServer.data.users);
10    } else if (dataFromServer.type === "contentchange") {
11      stateToChange.text = dataFromServer.data.editorContent || contentDefaultMessage;
12    }
13    stateToChange.userActivity = dataFromServer.data.userActivity;
14    this.setState({
15      ...stateToChange
16    });
17  };
18}

 1const sendMessage = (json) => {
 2  // We are sending the current data to all connected clients
 3  Object.keys(clients).map((client) => {
 4    clients[client].sendUTF(json);
 5  });
 6}
 7
 8connection.on('message', function(message) {
 9    if (message.type === 'utf8') {
10      const dataFromClient = JSON.parse(message.utf8Data);
11      const json = { type: dataFromClient.type };
12      if (dataFromClient.type === typesDef.USER_EVENT) {
13        users[userID] = dataFromClient;
14        userActivity.push(`${dataFromClient.username} joined to edit the document`);
15        json.data = { users, userActivity };
16      } else if (dataFromClient.type === typesDef.CONTENT_CHANGE) {
17        editorContent = dataFromClient.content;
18        json.data = { editorContent, userActivity };
19      }
20      sendMessage(JSON.stringify(json));
21    }
22  });

1connection.on('close', function(connection) {
2    console.log((new Date()) + " Peer " + userID + " disconnected.");
3    const json = { type: typesDef.USER_EVENT };
4    userActivity.push(`${users[userID].username} left the document`);
5    json.data = { users, userActivity };
6    delete clients[userID];
7    delete users[userID];
8    sendMessage(JSON.stringify(json));
9  });