使用WebSocket实现一个简单的页面聊天

1,425 阅读2分钟

上一篇对WebSocket进行了介绍,这次使用WebSocket来实现一个简单的页面聊天的功能。

准备

需要注意:
tomcat6是不支持WebSocket的,从tomcat7才开始支持。
普通的JaveEE、JSPServlet项目也是不支持WebSocket的,需要拷贝额外的jar包

相关依赖

这里使用开发工具创建SpringBoot项目时可以直接将依赖加入至项目中

前段需要用到的JS

代码

后台Configuration

在这里对WebSocket进行基本的配置

@Configuration
@EnableWebSocketMessageBroker //开启信息代理
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
    /**
     * 配置连接点信息
     * @param registry
     */
    @Override
    public void  registerStompEndpoints(StompEndpointRegistry registry){
        //连接点,这里的withSockJS() 是前段库
        registry.addEndpoint("/ws/ep").withSockJS();    
    }

    /**
     * 配置消息队列(代理)
     * @param registry
     */
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //启动代理,这里可以配置多个,/queue 代表的是点对点的消息
        registry.enableSimpleBroker("/queue");  
    }
}

后台Controller

@Controller //注意这里使用的是Controller注解,而不是RestController
public class WsController {
    //只要引入了WebSocket依赖,就会自动注册这个Bean
    @Autowired
    SimpMessagingTemplate simpMessagingTemplate;   

    /**
     * 这个方法用来接收客户端发来送来的消息,参数是消息本身
     * 通信协议可以自定义,即参数的格式可以自定义
     * 可以接受JSON参数,且不需要添加注解
     * @param msg
     * @param principal  保存了用户信息
     */
    @MessageMapping("/ws/chat") //消息映射
    public void receiveMessage(String msg,Principal principal){
        //从前段发送过来的字符串通过 ; 号拆分出最后一节字符串(需要接受信息的客户端)
        String[] split = msg.split(";");
        Map<String,Object>map = new HashMap<>();
        map.put("msg",split[0]);
        map.put("username",split[split.length-1]);
        //  split[split.length-1]     接受信息的客户端
        //  "/queue/msg"              队列
        simpMessagingTemplate.convertAndSendToUser(split[split.length-1],"/queue/msg",map);
    }
}

前段

这里就不对前段进行相关的介绍了,大致描述下

<template>
  <div>
    <div style="margin-top: 20px">
      <div v-for = "(m,index) in ms" :key="index">{{m.username}}:{{m.msg}}</div>
    </div>
    <el-input v-model="msg"></el-input>
    <!-- 通过点击触发sendMsg() 方法来向后台发送数据 -->
    <el-button @click = "sendMsg">发送</el-button>
  </div>
</template>

<script>
  //获取JS
  import '../../lib/sockjs'
  import '../../lib/stomp'

  export default {
    name: "FriendChat",
    data(){
      return {
        msg:'',
        ms:[],
        stomp:null
      }
    },
    mounted(){
      //页面渲染的时候就通过initCon() 方法获取到连接
      this.initCon();
    },
    methods:{
      initCon(){
        let _this=this;
        this.stomp = Stomp.over(new SockJS('/ws/ep'));
        this.stomp.connect({},success => {
          _this.stomp.subscribe("/user/queue/msg",msg =>{
            _this.ms.push(JSON.parse(msg.body));
          })
        },fail =>{

        })
      },
      sendMsg(){
        this.stomp.send("/ws/chat",{ },this.msg)
      }
    }
  }
</script>

<style scoped>
</style>

效果

这里通过两个不同的用户来发送信息测试

通过控制台确保协议已升级且获得连接


输入字符串,通过分号将接受者的信息分开

另一边则收到了发送过来的信息