2024-08-27

以下是一个简化的Spring Boot整合WebSocket和Redis实现WebSocket集群的例子:




// WebSocketConfig.java
@Configuration
public class WebSocketConfig {
 
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}
 
// WebSocketServer.java
@Component
@ServerEndpoint("/websocket/{userId}")
public class WebSocketServer {
 
    private static final Logger log = LoggerFactory.getLogger(WebSocketServer.class);
    private Session session;
    private String userId;
 
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        this.session = session;
        this.userId = userId;
        log.info("用户连接:{}", userId);
        // 将新连接的WebSocketServer存储到Redis中
        RedisUtil.bindRedisSocket(userId, this);
    }
 
    @OnClose
    public void onClose() {
        log.info("用户断开连接:{}", userId);
        // 断开连接后,从Redis中移除
        RedisUtil.unbindRedisSocket(userId);
    }
 
    @OnMessage
    public void onMessage(String message) {
        log.info("用户消息:{} - {}", userId, message);
        // 群发消息逻辑
        RedisUtil.sendMessageToUser(userId, message);
    }
 
    // 发送消息给单个用户
    public void sendMessageToUser(String message) {
        try {
            this.session.getBasicRemote().sendText(message);
        } catch (IOException e) {
            log.error("发送消息出错:{}", e.getMessage());
        }
    }
}
 
// RedisUtil.java
public class RedisUtil {
 
    public static void bindRedisSocket(String userId, WebSocketServer webSocketServer) {
        // 将WebSocketServer存入Redis
    }
 
    public static void unbindRedisSocket(String userId) {
        // 从Redis移除WebSocketServer
    }
 
    public static void sendMessageToUser(String userId, String message) {
        // 根据userId查找对应的WebSocketServer,并发送消息
    }
}

这个例子中,我们定义了一个WebSocket配置类,一个WebSocket服务端点,以及一个帮助处理与Redis交互的工具类。在实际应用中,你需要实现bindRedisSocketunbindRedisSocket方法,将WebSocket连接存储到Redis,并在需要发送消息时查找并发送给对应的客户端。

这个简化的例子展示了如何使用Spring Boot和WebSocket实现一个基本的群聊系统,在这个系统中,消息会被群发到所有的连接的客户端。在实际应用中,你可能需要扩展这个例子以支持私聊、多房间聊天等功能。

2024-08-27

以下是一个简单的Go语言Websocket通讯的示例代码。这个例子中,服务器端会接收客户端发送的消息,并将其回传给客户端。




package main
 
import (
    "fmt"
    "log"
    "net/http"
 
    "github.com/gorilla/websocket"
)
 
var upgrader = websocket.Upgrader{
    CheckOrigin: func(r *http.Request) bool {
        return true // 允许跨域请求
    },
}
 
func echo(w http.ResponseWriter, r *http.Request) {
    c, err := upgrader.Upgrade(w, r, nil)
    if err != nil {
        log.Println(err)
        return
    }
    defer c.Close()
 
    for {
        mt, message, err := c.ReadMessage()
        if err != nil {
            log.Println(err)
            break
        }
 
        err = c.WriteMessage(mt, message)
        if err != nil {
            log.Println(err)
            break
        }
    }
}
 
func main() {
    http.HandleFunc("/echo", echo)
    fmt.Println("Starting server on :8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

在这个例子中,我们使用了gorilla/websocket包来处理Websocket请求。服务器端在/echo路径上接收Websocket连接,并将接收到的消息原样发送回客户端。

要运行这个服务器,请将代码保存到一个.go文件中,然后通过go run命令来启动它。服务器将在8080端口监听Websocket连接。

客户端的代码实现将取决于你的应用场景,但一个简单的JavaScript客户端示例可能如下所示:




<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Echo Client</title>
</head>
<body>
    <script>
        var ws = new WebSocket("ws://localhost:8080/echo");
        
        ws.onopen = function(evt) {
            console.log("Connection open ..."); 
        };
        
        ws.onmessage = function(evt) {
            console.log("Received Message: " + evt.data);
        };
        
        ws.onclose = function(evt) {
            console.log("Connection closed.");
        };
        
        ws.onerror = function(evt) {
            console.error("Error occured: " + evt.data);
        };
        
        function sendMessage() {
            var message = document.getElementById('message').value;
            ws.send(message);
        }
    </script>
    
    <input type="text" id="message" value="Hello, WebSocket!">
    <button onclick="sendMessage()">Send Message</button>
</body>
</html>

在这个HTML页面中,我们创建了一个Websocket连接到ws://localhost:8080/echo,并提供了一个文本输入框和一个按钮来发送消息。当用户点击按钮时,sendMessage函数会被调用,该函数将文本框中的值通过Websocket发送到服务器。服务器会原样返回这个消息,客户端JavaScript代码会在控制台打印出接收到的消息。

2024-08-27



// 创建一个新的WebSocket实例
var ws = new WebSocket('ws://www.example.com/socketserver');
 
// 当WebSocket的readyState变为OPEN时,表示连接已建立,可以发送信息
ws.onopen = function(event) {
    console.log('WebSocket 连接已打开');
    // 发送一个初始化消息给服务器
    ws.send('初始化连接');
};
 
// 当服务器发送信息过来时,会触发onmessage事件
ws.onmessage = function(event) {
    console.log('收到消息: ' + event.data);
};
 
// 当WebSocket的连接关闭时,会触发onclose事件
ws.onclose = function(event) {
    console.log('WebSocket 连接已关闭');
};
 
// 当WebSocket通信发生错误时,会触发onerror事件
ws.onerror = function(event) {
    console.error('WebSocket 通信发生错误');
};
 
// 当你需要关闭WebSocket连接时,可以调用close方法
// ws.close();

这段代码演示了如何创建一个WebSocket连接,并为连接、接收消息、关闭连接以及通信错误定义了处理函数。这是实现WebSocket实时通信的基本用法。

2024-08-27

以下是一个使用 Vue.js、Element UI 和 WebSocket 实现的简易聊天室的核心代码示例:




<template>
  <el-container style="height: 100vh;">
    <el-header>简易聊天室</el-header>
    <el-main>
      <el-input
        type="textarea"
        v-model="message"
        placeholder="请输入内容"
        @keyup.enter.native="sendMessage"
      ></el-input>
      <el-button type="primary" @click="sendMessage">发送</el-button>
      <el-divider></el-divider>
      <ul>
        <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
      </ul>
    </el-main>
  </el-container>
</template>
 
<script>
export default {
  data() {
    return {
      ws: null,
      message: '',
      messages: []
    };
  },
  created() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket('ws://localhost:8080');
      this.ws.onopen = () => console.log('WebSocket 连接成功');
      this.ws.onerror = () => console.log('WebSocket 连接发生错误');
      this.ws.onmessage = ({ data }) => {
        this.messages.push(data);
      };
    },
    sendMessage() {
      if (this.message.trim()) {
        this.ws.send(this.message.trim());
        this.message = '';
      }
    }
  }
};
</script>
 
<style>
body, ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
.el-container {
  width: 100%;
}
 
.el-header {
  text-align: center;
  line-height: 60px;
}
 
.el-main {
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.el-input textarea {
  resize: none;
  height: 150px;
}
</style>

这段代码实现了一个简易的聊天室界面,使用 Element UI 的布局组件和表单组件来构建界面,并使用 WebSocket 实现了消息的发送和接收。在创建组件时,它会尝试连接到 ws://localhost:8080 的 WebSocket 服务器。发送消息时,它会清空输入框,并将消息推送到 messages 数组中,这个数组绑定了列表来显示历史消息。

2024-08-27

在Java中使用WebSocket,你可以使用Java EE的javax.websocket包,或者使用其他库如Java-WebSocket。以下是一个使用Java EE的javax.websocket包创建WebSocket服务端的简单示例:

首先,创建一个继承自javax.websocket.Endpoint的WebSocket端点类:




import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
 
@ServerEndpoint("/websocket")
public class WebSocketTest {
 
    @OnOpen
    public void onOpen(Session session) {
        System.out.println("Connected ... " + session.getId());
    }
 
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("Received message: " + message);
        try {
            session.getBasicRemote().sendText("Received: " + message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
 
    @OnClose
    public void onClose(Session session, CloseReason closeReason) {
        System.out.println("Closed ... " + session.getId());
    }
 
    @OnError
    public void onError(Session session, Throwable throwable) {
        System.out.println("Error ... " + session.getId());
        throwable.printStackTrace();
    }
}

确保你的服务器支持Java EE的WebSocket API,并且已经配置了端点。如果你使用的是Tomcat,你可能需要添加tomcat7-websocket.jar到你的类路径中。

然后,你可以使用JavaScript在客户端连接到这个WebSocket:




var ws = new WebSocket("ws://yourserver/websocket");
ws.onopen = function(event) {
    console.log("WebSocket connected");
};
 
ws.onmessage = function(event) {
    console.log("Received message: " + event.data);
};
 
ws.onclose = function(event) {
    console.log("WebSocket closed");
};
 
ws.onerror = function(event) {
    console.error("WebSocket error observed:", event.data);
};
 
// Send a message to the websocket
ws.send("Hello WebSocket!");

确保替换yourserver为你的服务器地址。这个JavaScript客户端示例会尝试连接到服务器上的/websocket端点。

2024-08-27

在Spring Boot中实现WebSocket的实时通信,你可以使用Spring的@EnableWebSocketMessageBroker注解来配置WebSocket,并且创建一个控制器来处理WebSocket的消息。

以下是一个简单的例子:

  1. 添加Maven依赖:



<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
  1. 配置WebSocketMessageBroker:



import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;
 
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }
 
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}
  1. 创建WebSocket控制器:



import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;
 
@Controller
public class WebSocketController {
 
    @MessageMapping("/chat.sendMessage")
    @SendTo("/topic/public.messages")
    public ChatMessage sendMessage(ChatMessage message) {
        return message;
    }
}
 
class ChatMessage {
    private String content;
    // getters and setters
}

在这个例子中,客户端可以通过连接到/ws端点来建立WebSocket连接,并且可以发送消息到服务器,服务器将这些消息广播到所有连接的客户端。

确保你的ChatMessage类有合适的getter和setter方法,以便能够被Spring的消息转换器序列化和反序列化。

2024-08-26



import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
 
// 使用 @ServerEndpoint 注解定义一个 WebSocket 服务端点,
// 客户端可以通过 ws://{host}:{port}/websocket/{path} 连接到这个端点。
@ServerEndpoint("/websocket/chat")
public class ChatEndpoint {
 
    // 使用一个 concurrent 的集合来存储所有的当前连接会话。
    private static final CopyOnWriteArraySet<Session> sessions = new CopyOnWriteArraySet<>();
 
    // 当新的客户端连接时,会触发 @OnOpen 注解的方法。
    @OnOpen
    public void onOpen(Session session) {
        sessions.add(session);
        System.out.println("新连接加入:" + session.getId());
    }
 
    // 当客户端发送消息时,会触发 @OnMessage 注解的方法。
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("收到消息:" + message);
        // 广播消息给所有的客户端。
        for (Session peer : sessions) {
            if (!peer.equals(session)) {
                try {
                    peer.getBasicRemote().sendText(message);
                } catch (IOException e) {
                    System.out.println("发送消息出错:" + e.getMessage());
                }
            }
        }
    }
 
    // 当连接关闭时,会触发 @OnClose 注解的方法。
    @OnClose
    public void onClose(Session session) {
        sessions.remove(session);
        System.out.println("连接关闭:" + session.getId());
    }
 
    // 当出现错误时,会触发 @OnError 注解的方法。
    @OnError
    public void onError(Session session, Throwable throwable) {
        System.out.println("发生错误:" + throwable.getMessage());
    }
}

这段代码定义了一个简单的 WebSocket 服务端,当有新的客户端连接时,它会将会话添加到一个集合中;当接收到客户端的消息时,它会将这个消息广播给所有其他的客户端。同时,它还处理了连接关闭和错误情况。这个例子展示了如何使用 Java WebSocket API 来创建一个简单的聊天服务器。

2024-08-26

在Spring Boot中集成WebSocket可以通过Spring WebSocket支持来完成。以下是一个简单的例子:

  1. 添加依赖到你的pom.xml



<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
  1. 配置WebSocket,创建一个配置类:



@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }
 
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }
}
  1. 创建一个控制器来处理WebSocket请求:



@Controller
public class WebSocketController {
 
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) {
        return new Greeting("Hello, " + message.getName() + "!");
    }
}
 
class Greeting {
    private String content;
 
    // getters and setters
}
 
class HelloMessage {
    private String name;
 
    // getters and setters
}
  1. 在前端使用WebSocket:



var socket = new SockJS('/ws');
var stompClient = Stomp.over(socket);
stompClient.connect({}, function(frame) {
    console.log('Connected: ' + frame);
    stompClient.subscribe('/topic/greetings', function(greeting){
        console.log(JSON.parse(greeting.body).content);
    });
});
 
stompClient.send("/app/hello", {}, JSON.stringify({ 'name': 'John Doe' }));

以上代码展示了如何在Spring Boot应用中设置WebSocket服务器,并定义了一个简单的消息映射。客户端使用SockJS和Stomp.js与服务器进行通信。

2024-08-26



// autox.js 中创建 WebSocket 连接的示例代码
 
// 创建一个 WebSocket 实例
var ws = new WebSocket('ws://your-websocket-server.com/path');
 
// 当 WebSocket 打开时,发送一个初始化消息
ws.onopen = function(event) {
    ws.send('Hello, Server!');
};
 
// 接收服务器响应
ws.onmessage = function(event) {
    console.log('Received Message:', event.data);
};
 
// 当 WebSocket 关闭时,尝试重新连接
ws.onclose = function(event) {
    console.log('WebSocket Closed. Attempting to Reconnect...');
    // 重连逻辑(可选)
};
 
// 处理错误事件
ws.onerror = function(error) {
    console.error('WebSocket Error:', error);
};

这段代码演示了如何在JavaScript中使用WebSocket API创建一个WebSocket连接,并处理打开、消息接收、关闭和错误事件。这是实现实时通信的一个基本例子,适合作为Web开发入门的学习资料。

2024-08-25

以下是一个简化的Spring Boot后端实现WebSocket聊天功能的代码示例:




import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.handler.TextWebSocketHandler;
 
import java.util.concurrent.ConcurrentHashMap;
 
public class ChatWebSocketHandler extends TextWebSocketHandler {
 
    private static final ConcurrentHashMap<String, WebSocketSession> users = new ConcurrentHashMap<>();
 
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        users.put(session.getId(), session);
        System.out.println("新用户加入:" + session.getId());
    }
 
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        System.out.println("收到消息:" + payload);
        // 广播消息
        users.values().forEach(user -> {
            try {
                user.sendMessage(new TextMessage(payload));
            } catch (Exception e) {
                e.printStackTrace();
            }
        });
    }
 
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        users.remove(session.getId());
        System.out.println("用户已离开:" + session.getId());
    }
}

在Spring Boot中配置WebSocket的配置类:




import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.*;
 
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
 
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(chatWebSocketHandler(), "/chat-endpoint")
                .setAllowedOrigins("*");
    }
 
    @Bean
    public ChatWebSocketHandler chatWebSocketHandler() {
        return new ChatWebSocketHandler();
    }
}

前端HTML和JavaScript代码示例:




<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat</title>
</head>
<body>
    <div>
        <input type="text" id="messageText" />
        <button onclick="sendMessage()">Send</button>
    </div>
    <div id="chatWindow">
        <!-- Messages will appear here -->
    </div>
 
    <script>
        var ws;
        function connect() {
            ws = new WebSocket("ws://localhost:8080/chat-endpoint");
            ws.onmessage = function(event) {