通过websocket，springboot,vue实现简单在线聊天室（运用了ngrok）

依赖

 <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
 </dependency>

后端

package com.wh.websockettest.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @author:wanghao
 */
@Configuration
public class WebSocketStompConfig {
    //这个bean的注册,用于扫描带有@ServerEndpoint的注解成为websocket  ,如果你使用外置的tomcat就不需要该配置文件
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

package com.wh.websockettest.config;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @author:wanghao
 * @Date:2020/8/19 15:09
 **/
@Component
@ServerEndpoint("/whwebsocket/{userId}")
public class WebSocket {
    Logger logger = LoggerFactory.getLogger(this.getClass());

    private static Map<String, WebSocket> map = new ConcurrentHashMap<>();

    private Session session;

    private String userId;

    @OnOpen
    public void onOpen(@PathParam("userId") String userId, Session session) {
        this.session = session;
        this.userId = userId;
        map.put(this.userId, this);
        System.out.println(userId + "连接");
    }

    @OnClose
    public void onClose() {
        map.remove(this.userId);
        System.out.println(userId + "离开");
    }

    @OnError
    public void onError(Session session, Throwable throwable) {
        logger.info("服务器发生错误：" + throwable.getMessage());
    }


    @OnMessage
    public void onMessage(String message, Session session) {
        logger.info("来自客户端" + session.getId() + "的消息：" + message);
        logger.info("--------------------");
        sendMessageAll(message);
    }

    public void sendMessageAll(String message) {
        for (String user : map.keySet()) {
            if (!user.equals(userId)) {
                map.get(user).session.getAsyncRemote().sendText(message);
            }
        }
    }
}

前端

<template>
  <div>
    聊天室<br />
    <hr />
    <div id="message">
    </div>
    <hr />
    <input type="text"
           id="text">
    <button @click="websocketSendMessage">发送消息</button>
  </div>

</template>
<script>
export default {
  data () {
    return {
      websocket: null
    }
  },
  created () {
    this.initwebsocket()
  },
  methods: {
    initwebsocket () {
      if ('WebSocket' in window) {
        this.websocket = new WebSocket('ws://wanghao6x.free.idcfengye.com/wh/whwebsocket/' + (new Date()).valueOf())
        this.websocket.onopen = this.websocketOnOpen
        this.websocket.onclose = this.websocketOnClose
        this.websocket.onerror = this.websocketOnError
        this.websocket.onmessage = this.websocketOnMessage
      } else {
        alert('Not support websocket')
      }
    },
    websocketOnOpen () {
      console.info('连接')
    },
    websocketOnClose () {
      console.info('关闭')
    },
    websocketOnError (e) {
      console.info('错误')
    },
    websocketOnMessage (e) {
      console.info('接收消息')
      console.info(e.data)
      this.showMessage(e.data)
    },
    websocketSendMessage () {
      console.info('发送消息')
      const message = document.getElementById('text').value
      this.websocket.send(message)
      this.showMessage(message)
    },
    showMessage (innerHTML) {
      document.getElementById('message').innerHTML += innerHTML + '<br/>'
    }
  }
}
</script>

前端必要配置

在根目录(src同级)下创建vue.config.js文件
内容为

module.exports = {
  devServer: {
    disableHostCheck: true

  }
}

不配置其他主机访问页面时可能出现
Invalid Host header 服务器域名访问出现的问题
参考
https://www.cnblogs.com/liubingboke/p/10939210.html

ngrok

1:后端

2：前端是
http://wanghaox.free.idcfengye.com/ 对应8080端口

界面效果

本机localhost访问

其他主机访问

本机发送消息：1

其他主机接收

其他主机发送消息：2

本机接收