第8章 1024前端系统开发

2023-10-19 00:56:55

网站前台-交友与聊天

学习目标：

1.推荐好友列表

1.1数据渲染

（1）easyMock模拟数据

URL: friend/friend/list

Method: GET

{"flag": true,"code": 20000,"data": [{"nickname": "小雅","pic": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1872448934,405071047&fm=27&gp=0.jpg","age": 24,"constellation": "金牛座","activity":"喝咖啡"},{"nickname": "婷婷","pic": "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2989004090,2118875929&fm=27&gp=0.jpg","age": 23,"constellation": "双子座","activity":"看电影"},{"nickname": "慕冉","pic": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4253788808,3515932570&fm=27&gp=0.jpg","age": 27,"constellation": "处女座","activity":"逛街"},{"nickname": "茉莉莉","pic": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1819234630,314130062&fm=27&gp=0.jpg","age": 20,"constellation": "射手座","activity":"玩游戏"}]
}

（2）API编写

创建api/friend.js

import request from '@/utils/request'
const api_group = 'friend'
const api_name = 'friend'
export default {list() {   return request({url: `/${api_group}/${api_name}/list`,method: 'get'})}
}

（3）页面组件数据渲染

修改pages/friend/index.vue

<template><div><div class="banner"> <div class="wrapper"> <img src="~/assets/img/page-banner.png" alt="" /> div> div>  <div class="wrapper tag-item"> <div class="fl left-list"> <p class="full-info">为了获取更好的体验 请 <a href="makeFriends-edit.html" target="_blank">完善兴趣信息a><span class="sui-icon icon-tb-close close">span>p> <div class="friend-dating-list"> <ul class="friends"> <li class="friend-item" v-for="(item,index) in friendList" :key="index" > <div class="fl photo"> <span class="cafe-more">span> <div class="img"><img :src="item.pic" alt="" height="148"  width="239"/>div> <div class="tag"> <span class="tag-cafe cafe"><i class="fa fa-coffee" aria-hidden="true">i> {{item.activity}}span> div> div> <div class="fl content"> <p class="title"> <span class="name">{{item.nickname}}span> 邀你一起 <span class="cafe">喝咖啡span> <b class="bold">匹配度 96%b> p> <p class="aa"> <span class="money"> {{item.age}}岁 | {{item.constellation}} | 教育 | 软件工程师span> p> <p class="point"> 他刚刚分享了XXX文章p> <p class="desc"> 推荐理由：你们共同关注PHP、Python 等 5 个标签，都关注 XXX 活动。p> div> <div class="fr xy"> <ul> <li><i class="like sui-icon icon-tb-like">i>li> <li><i class="close sui-icon icon-tb-roundclose">i>li> <li><i class="message sui-icon icon-tb-comment">i>li> ul> div> <div class="clearfix">div> li>       ul>      div> div> <div class="fl right-tag"> <div class="friend-info-card"> <div class="card"> <div class="photo-name"> <img src="~/assets/img/widget-photo.png" alt="" /> <div class="name-edit"> <p><span class="name">用户名span> <span class="edit">编辑兴趣资料span>p> <p>认证p> div> <div class="clearfix">div> div> <div class="like"> <span class="like1">喜欢　<i class="num">400i>span> <span>被喜欢　<i class="num">5i>span> div> div> div> <div class="block-btn"> <p>约一约有趣的人，会一会好的时光！p> <a class="sui-btn btn-block btn-share" href="~/assets/makeFriends-submit.html" target="_blank">发布约会a> div> <div class="rank"> <div class="head"> <h3 class="title">排行榜h3> div> <div class="rank-list"> <ul class="rank"> <li> <span class="fl dating">喝咖啡span> <span class="fr cafe">102258span> li> <li> <span class="fl dating">吃饭span> <span class="fr eat">9878span> li> <li> <span class="fl dating">看电影span> <span class="fr movie">2564span> li> <li> <span class="fl dating">旅行span> <span class="fr travel">897span> li> ul> div> div> <div class="friend-line-card"> <div class="card"> <p>找个合适的参加一场线下活动p> div> div> <div class="friend-line-card"> <div class="card"> <p>找个合适的参加一场线下活动p> div> div> div> <div class="clearfix">div> div> div>
template>
<script>
import '~/assets/css/page-sj-makeFriends-index.css'
import friendApi from '@/api/friend'
export default {asyncData ({ params, error }) {return friendApi.list().then( res=>{return {friendList: res.data.data }})}
}
script>

1.2心动配对

（1）easyMock模拟数据

URL:friend/friend/like/{id}/{type}

Method:put

{"flag":true,"code":20000,"data": {"nickname": "悦悦","pic": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3814696406,295322094&fm=27&gp=0.jpg","age": 21,"constellation": "狮子座","activity":"聊人生"}
}

（2）编写API。 修改

  like(id,type) {return request({url: `/${api_group}/${api_name}/like/${id}/${type}`,method: 'put'})}

（3）页面调用 修改pages/friends/index.vue ,代码部分增加方法

  methods:{like(id,type){friendApi.like(id,type).then(  res=>{for(let i=0;i<this.friendList.length;i++){if(this.friendList[i].id===id){this.friendList.splice(i,1)}}          this.friendList.push(res.data.data)})}}

页面部分：

<li><i class="like sui-icon icon-tb-like" @click="like(item.id,1)">i>li> 
<li><i class="close sui-icon icon-tb-roundclose"  @click="like(item.id,0)">i>li>

1.3样式处理

（1）修改代码部分

     changeActive($event){$event.currentTarget.className="like sui-icon icon-tb-likefill";},removeActive($event){$event.currentTarget.className="like sui-icon icon-tb-like";},changeClose($event){$event.currentTarget.className="close sui-icon icon-tb-roundclosefill";},removeClose($event){$event.currentTarget.className="close sui-icon icon-tb-roundclose";}

（2）修改页面部分

<li><i class="like sui-icon icon-tb-like" @click="like(item.id,1)"  @mouseover="changeActive($event)" @mouseout="removeActive($event)">i>li> 
<li><i class="close sui-icon icon-tb-roundclose"  @click="like(item.id,0)"  @mouseover="changeClose($event)" @mouseout="removeClose($event)">i>li>

2.消息中心

2.1构建页面

创建pages/friends/friendList.vue

<template>
<div><div class="banner"> <div class="wrapper"> <img src="~/assets/img/page-banner.png" alt="" /> div> div>  <div class="wrapper tag-item"> <div class="fl left-list"> <div class="friend-list"> <h4>消息中心h4> <ul> <li class="friend-item"> <div class="tip"> <span class="num">2span> <img src="~/assets/img/widget-photo.png" alt="" /> div> <div class="msg"> <p><span class="name">毕鹏span><span class="date">2017-10-23span>p> <p class="msg-content">Hi 你在干什么呢？p> div> li> <li class="friend-item"> <div class="tip"> <span class="num">2span> <img src="~/assets/img/widget-photo.png" alt="" /> div> <div class="msg"> <p><span class="name">毕鹏span><span class="date">2017-10-23span>p> <p class="msg-content">Hi 你在干什么呢？p> div> li> <li class="friend-item"> <div class="tip"> <span class="num">2span> <img src="~/assets/img/widget-photo.png" alt="" /> div> <div class="msg"> <p><span class="name">毕鹏span><span class="date">2017-10-23span>p> <p class="msg-content">Hi 你在干什么呢？p> div> li> <li class="friend-item"> <div class="tip"> <span class="num">2span> <img src="~/assets/img/widget-photo.png" alt="" /> div> <div class="msg"> <p><span class="name">毕鹏span><span class="date">2017-10-23span>p> <p class="msg-content">Hi 你在干什么呢？p> div> li> <li class="friend-item"> <div class="tip"> <span class="num">2span> <img src="~/assets/img/widget-photo.png" alt="" /> div> <div class="msg"> <p><span class="name">毕鹏span><span class="date">2017-10-23span>p> <p class="msg-content">Hi 你在干什么呢？p> div> li> ul>      div> div> <div class="fl right-tag"> <div class="friend-info-card"> <div class="card"> <div class="photo-name"> <img src="~/assets/img/widget-photo.png" alt="" /> <div class="name-edit"> <p><span class="name">用户名span> <span class="edit">编辑兴趣资料span>p> <p>认证p> div> <div class="clearfix">div> div> <div class="like"> <span class="like1">喜欢　<i class="num">400i>span> <span>被喜欢　<i class="num">5i>span> div> div> div> <div class="block-btn"> <p>约一约有趣的人，会一会好的时光！p> <a class="sui-btn btn-block btn-share" href="~/assets/makeFriends-submit.html" target="_blank">发布约会a> div> <div class="rank"> <div class="head"> <h3 class="title">排行榜h3> div> <div class="rank-list"> <ul class="rank"> <li> <span class="fl dating">喝咖啡span> <span class="fr cafe">102258span> li> <li> <span class="fl dating">吃饭span> <span class="fr eat">9878span> li> <li> <span class="fl dating">看电影span> <span class="fr movie">2564span> li> <li> <span class="fl dating">旅行span> <span class="fr travel">897span> li> ul> div> div> <div class="friend-line-card"> <div class="card"> <p>找个合适的参加一场线下活动p> div> div> <div class="friend-line-card"> <div class="card"> <p>找个合适的参加一场线下活动p> div> div> div> <div class="clearfix">div> 
div>
div>
template>
<script>
import '~/assets/css/page-sj-makeFriends-list.css'
export default {  
}
script>

2.2数据渲染

（1）easyMock模拟数据

URL: friend/friend/mylist

Method:GET

{"flag": true,"code": 20000,"data":[{"id":"1","nickname": "悦悦","avatar": "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3016890200,2017113207&fm=27&gp=0.jpg","unread": 3,"message": "在吗？","lasttime":"2018-4-1"},{"id":"2","nickname": "婉儿","avatar": "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=394607255,721510492&fm=27&gp=0.jpg","unread": 10,"message": "怎么不理我:(","lasttime":"2018-4-2"},{"id":"3","nickname": "雨柯","avatar": "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=359604599,305372113&fm=27&gp=0.jpg","unread": 1,"message": "化妆品诚招代理，微信：abcd1234","lasttime":"2018-4-3"}    ] 
}

（2）API编写。修改api/friend.js

  mylist() {   return request({url: `/${api_group}/${api_name}/mylist`,method: 'get'})}

（3）页面渲染。修改pages/friends/friendList.vue

<template>
<div><div class="banner"> <div class="wrapper"> <img src="~/assets/img/page-banner.png" alt="" /> div> div>  <div class="wrapper tag-item"> <div class="fl left-list"> <div class="friend-list"> <h4>消息中心h4> <ul> <li class="friend-item" v-for="(item,index) in myFriendList" :key="index"> <div class="tip"> <span class="num">{{item.unread}}span> <img :src="item.avatar" alt="" height="50px"  width="50px"/> div> <div class="msg"> <p><span class="name">{{item.nickname}}span><span class="date">{{item.lasttime}}span>p> <p class="msg-content">{{item.message}}p> div> li>       ul>      div> div> <div class="fl right-tag"> <div class="friend-info-card"> <div class="card"> <div class="photo-name"> <img src="~/assets/img/widget-photo.png" alt="" /> <div class="name-edit"> <p><span class="name">用户名span> <span class="edit">编辑兴趣资料span>p> <p>认证p> div> <div class="clearfix">div> div> <div class="like"> <span class="like1">喜欢　<i class="num">400i>span> <span>被喜欢　<i class="num">5i>span> div> div> div> <div class="block-btn"> <p>约一约有趣的人，会一会好的时光！p> <a class="sui-btn btn-block btn-share" href="~/assets/makeFriends-submit.html" target="_blank">发布约会a> div> <div class="rank"> <div class="head"> <h3 class="title">排行榜h3> div> <div class="rank-list"> <ul class="rank"> <li> <span class="fl dating">喝咖啡span> <span class="fr cafe">102258span> li> <li> <span class="fl dating">吃饭span> <span class="fr eat">9878span> li> <li> <span class="fl dating">看电影span> <span class="fr movie">2564span> li> <li> <span class="fl dating">旅行span> <span class="fr travel">897span> li> ul> div> div> <div class="friend-line-card"> <div class="card"> <p>找个合适的参加一场线下活动p> div> div> <div class="friend-line-card"> <div class="card"> <p>找个合适的参加一场线下活动p> div> div> div> <div class="clearfix">div> 
div>
div>
template>
<script>
import '~/assets/css/page-sj-makeFriends-list.css'
import friendApi from '@/api/friend'
export default {asyncData ({ params, error }) {return friendApi.mylist().then( res=>{return {myFriendList: res.data.data }})}
}
script>

3.WebSocket快速入门

3.1WebSocket简介

3.3.1 WebSocket

​ Websocket是html5提出的一个协议规范，参考rfc6455。

​ websocket约定了一个通信的规范，通过一个握手的机制，客户端（浏览器）和服务器（webserver）之间能建立一个类似tcp的连接，从而方便c－s之间的通信。在websocket出现之前，web交互一般是基于http协议的短连接或者长连接。

​ WebSocket是为解决客户端与服务端实时通信而产生的技术。websocket协议本质上是一个基于tcp的协议，是先通过HTTP/HTTPS协议发起一条特殊的http请求进行握手后创建一个用于交换数据的TCP连接，此后服务端与客户端通过此TCP连接进行实时通信。

​ 以前web server实现推送技术或者即时通讯，用的都是轮询（polling），在特点的时间间隔（比如1秒钟）由浏览器自动发出请求，将服务器的消息主动的拉回来，在这种情况下，我们需要不断的向服务器发送请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源。

​ 而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信，但依然需要发出请求(reuqest)。

​ WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。 浏览器和服务器只需要要做一个握手的动作，在建立连接之后，服务器可以主动传送数据给客户端，客户端也可以随时向服务器发送数据。 此外，服务器与客户端之间交换的标头信息很小。

​ WebSocket并不限于以Ajax(或XHR)方式通信，因为Ajax技术需要客户端发起请求，而WebSocket服务器和客户端可以彼此相互推送信息

3.3.2 SockJS

​ SockJS是一个浏览器JavaScript库(对WebSocket原生API进行了封装)，它提供了一个类似于网络的对象。SockJS提供了一个连贯的、跨浏览器的Javascript API，它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域通信通道。

​ 一些浏览器中缺少对WebSocket的支持,因此，回退选项是必要的，而Spring框架提供了基于SockJS协议的透明的回退选项。

​ SockJS的一大好处在于提供了浏览器兼容性。优先使用原生WebSocket，如果在不支持websocket的浏览器中，会自动降为轮询的方式。 除此之外，spring也对socketJS提供了支持。

​ 如果java代码中添加了withSockJS() ，服务器也会自动降级为轮询。

registry.addEndpoint("/coordination").withSockJS();

​ SockJS的目标是让应用程序使用WebSocket API，但在运行时需要在必要时返回到非WebSocket替代，即无需更改应用程序代码。

3.3.3 STOMP

​ STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，简单(流)文本定向消息协议，它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。STOMP协议由于设计简单，易于开发客户端，因此在多种语言和多种平台上得到广泛地应用。

​ STOMP协议的前身是TTMP协议（一个简单的基于文本的协议），专为消息中间件设计。

​ STOMP是一个非常简单和容易实现的协议，其设计灵感源自于HTTP的简单性。尽管STOMP协议在服务器端的实现可能有一定的难度，但客户端的实现却很容易。例如，可以使用Telnet登录到任何的STOMP代理，并与STOMP代理进行交互。

3.3.4 STOMP.js

stomp.js（Stomp Over WebSocket）是使用H5 Web Socket API实现的Stomp客户端，可以实现消息实时推送.

3.2入门demo之匿名聊天室

3.2.1服务端代码

（1）创建spring boot工程 pom.xml引入起步依赖：

	<parent><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-parentartifactId><version>2.0.0.RELEASEversion><relativePath /> parent><properties><project.build.sourceEncoding>UTF-8project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding><java.version>1.8java.version>properties><dependencies><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-webartifactId>dependency><dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-websocketartifactId>dependency>dependencies>

（2）创建启动类

@SpringBootApplication
public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}
}

（3）创建配置类WebSocketConfig

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/topic");config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/my-websocket").withSockJS();}
}

这里配置了以“/app”开头的websocket请求url。和名为“my-websocket”的endpoint(端点)

（4）创建消息实体类SocketMessage

public class SocketMessage {private String message;private String date;public String getMessage() {return message;}public void setMessage(String message) {this.message = message;}public String getDate() {return date;}public void setDate(String date) {this.date = date;}
}

（5）创建ChatController，用于接受和处理聊天请求

@Controller
public class ChatController {@MessageMapping("/send")@SendTo("/topic/send")public SocketMessage send(SocketMessage message) throws Exception {DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");message.setDate(df.format(new Date()));return message;}
}

3.2.2客户端代码

在上面的SpringBoot工程的resources目录下创建static目录，static目录下创建index.html


<html>
<head>
<title>websockettitle>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js">script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js">script>
<script type="text/javascript">var stompClient=null;function connect(){var socket = new SockJS('http://localhost:8080/my-websocket');stompClient = Stomp.over(socket);stompClient.connect({}, function(frame) {// 注册发送消息stompClient.subscribe('/topic/send', function(msg) {var body= JSON.parse(msg.body) ;document.getElementById('message').innerHTML += "
"+body.date+"  "+ body.message;});});}connect();//连接//发送function send() {stompClient.send("/app/send", {}, JSON.stringify({'message' : document.getElementById('content').value}));}
script>
head>
<body><div><input type="text"id="content"  placeholder="请输入内容..." /><button onclick="send()" type="button">发送button><br/> 消息列表： <br/><div id="message">div>div>
body>
html>

3.3入门demo之服务端推送

我们刚才的例子是由客户端发起请求后，服务端给于响应，那如果由服务端主动发起如何实现呢？我们在上边的例子基础上再次添加新的功能，服务端每间隔一秒将服务端时间推送到客户端。

3.3.1服务端代码

创建任务类

@Component
@EnableScheduling
public class Task {@Autowiredprivate SimpMessagingTemplate messagingTemplate;@Scheduled(fixedRate = 1000)public void callback() throws Exception {// 发现消息DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");messagingTemplate.convertAndSend("/topic/callback", df.format(new Date()));}
}

3.3.2客户端代码

修改index.html

function connect(){var socket = new SockJS('http://localhost:8080/my-websocket');stompClient = Stomp.over(socket);stompClient.connect({}, function(frame) {// 注册发送消息//.......// 注册推送时间回调stompClient.subscribe('/topic/callback', function(r) {document.getElementById("date").innerHTML='当前服务器时间：' + r.body;});});}

3.4 入门demo之STOMP监听类

（1）创建监听类，此类的方法onApplicationEvent在用户连接时执行，可以获取用户的sessionID以及从前端传递过来的其它信息。

@Component
public class STOMPConnectEventListener implements           ApplicationListener<SessionConnectEvent> {@Autowiredprivate SimpMessagingTemplate messagingTemplate;@Overridepublic void onApplicationEvent(SessionConnectEvent event) {StompHeaderAccessor sha = StompHeaderAccessor.wrap(event.getMessage());String userId = sha.getNativeHeader("login").get(0);String sessionId = sha.getSessionId();System.out.println("STOMPConnectEventListener........"+userId+"-"+sessionId);    }
}

（2）修改页面index.html ,增加我的名字文本框，去掉connect()方法的自动调用

我的名字：<input id="username">
<button onclick="connect()" type="button">进入聊天室button>

修改connect()方法 ，将当前登录用户名传递给后端

stompClient.connect({"login": document.getElementById("username").value },      function(frame) {// 注册发送消息// .......
});

测试一下，看看能不能再控制台打印出当前用户名和sessionId

3.5入门demo 之点对点发送

当前用户名可以获取了，我们接下来就可以实现点对点发送了，开启私聊模式 ：）

（1）首先我们应该写个静态变量保存当前登录的用户列表，修改Application ，增加属性

	//当前用户列表public static Map<String,String> sessionMap=new HashMap<>();

我们以用户名作为key,sessionId为值存到hashMap中

（2）修改STOMPConnectEventListener的onApplicationEvent方法，将获取到的用户信息和sessionID保存到静态变量中

Application.sessionMap.put(agentId,sessionId);

（3）修改消息实体类SocketMessage

public class SocketMessage {private String fromUser;private String toUser;private String message;private String date;//getter and setter ....
}

（4）修改ChatController

@Controller
public class ChatController {@Autowiredprivate SimpMessagingTemplate messagingTemplate;@MessageMapping("/send")public void send(SocketMessage message) throws Exception {DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");message.setDate(df.format(new Date()));String sessionId= Application.sessionMap.get(message.getToUser());System.out.println("sessionId:"+sessionId);        messagingTemplate.convertAndSendToUser(sessionId,"/topic/send",message,createHeaders(sessionId));}private MessageHeaders createHeaders(String sessionId) {SimpMessageHeaderAccessor headerAccessor = SimpMessageHeaderAccessor.create(SimpMessageType.MESSAGE);headerAccessor.setSessionId(sessionId);headerAccessor.setLeaveMutable(true);return headerAccessor.getMessageHeaders();}
}

（5）页面增加文本框

发送给：

（6）修改页面index.html 中的JS代码

	var stompClient=null;function connect(){var socket = new SockJS('http://localhost:8080/my-websocket');stompClient = Stomp.over(socket);stompClient.connect({"login": document.getElementById("username").value }, function(frame) {// 注册发送消息stompClient.subscribe('/user/topic/send', function(msg) {var body= JSON.parse(msg.body) ;document.getElementById('message').innerHTML += "
"+body.date+"  "+ body.message;});});}//发送function send() {stompClient.send("/app/send", {}, JSON.stringify({'toUser' :document.getElementById('toUser').value,'message': document.getElementById('content').value}));}

3.6 Vue中使用SockJS和StompJS

我们刚才所做的例子都是基于原生方式的写法，那么如何在我们的项目中使用sockJS和StompJS呢？我们这里需要想到有两个问题

  1. sockJS和StompJS如何引用
  2. 跨域如何解决（因为是前后端分离）

我们现在来看实现步骤：

（1）修改服务端代码，解决跨域问题。修改WebSocketConfig的registerStompEndpoints方法

	@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/my-websocket").setAllowedOrigins("*").withSockJS();}

setAllowedOrigins("*")用于解决跨域问题

（2）安装sockJS和StompJS

cnpm install sockjs-client --save
cnpm install stompjs --save
cnpm install net --save

（3）在前端工程增加聊天测试页面 chattest.vue

<template><div>昵称:<input v-model="name"><button @click="connect">登录聊天室button>发送给：<input v-model="message.toUser">消息：<input v-model="message.message"><button @click="send">发送button>接受到消息：<div v-html="info">       div>div>
template>
<script>
import SockJS from "sockjs-client"
import Stomp from "stompjs"
export default {  data(){return {name:"",stompClient:null ,message:{toUser:'',message:''},info:""}},methods:{connect(){         let socket=new SockJS('http://localhost:8080/my-websocket')this.stompClient = Stomp.over(socket)this.stompClient.connect({"login": this.name }, this.onConnected);        },onConnected(frame) {this.stompClient.subscribe('/user/topic/send', this.callback)},callback(msg){let body= JSON.parse(msg.body) this.info += "
"+body.date+"  "+ body.message         },send(){this.stompClient.send("/app/send", {}, JSON.stringify(this.message));}}
}
script>

4.十次方-好友私聊

4.1聊天微服务

（1）创建十次方聊天服务模块 tensquare_chat

        <dependency><groupId>org.springframework.bootgroupId><artifactId>spring-boot-starter-websocketartifactId>dependency>

（2）创建com.tensquare.chat包 ，包下创建启动类

@SpringBootApplication
public class Application {public static void main(String[] args) {SpringApplication.run(Application.class, args);}
}

（3）创建消息实体类

public class SocketMessage {private String fromUser;private String toUser;private String message;private String date;// getter and setter ....
}

（4）创建配置类

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/topic");config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {registry.addEndpoint("/tensquare").setAllowedOrigins("*").withSockJS();}
}

4.2聊天前台页面


本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！

相关文章

Duilib中list控件支持ctrl和shif多行选中的实现

[ICML2015]Batch Normalization:Accelerating Deep Network Training by Reducing Internal Covariate Shif

win10系统 微软输入法 于eclipse ctrl+shif+f冲突间接处理办法

Codeforces Round #259 (Div. 2) B. Little Pony and Sort by Shif

读LDD3，内存映射与DMA--PAGE_SHIF…

VMware虚拟机安装XP【要先分区，再设置BOOT 启动CD，shif+上移】

更换iBus五笔的左与右Shif

sublime ctrl+shif+f 没用解决办法

idea 对 ctrl + z 的撤销 是 ctrl + shif + z

计算机最早的设计师应用于,计算机应用基础选择题doc.doc

win10自带截图神器：Win+Shift+S

Python基础之文件目录操作

python简述目录_Python基础之文件目录操作(示例代码)

tp5 如何做数据采集

任务2-7(服务器字体+阿里巴巴矢量库)

html标签（1)：h1~h6,p,br,pre,hr

TI 电量计介绍与芯片选型指南

几款TI电源芯片简介

TI DSP芯片C2000系列读取FLASH数据

德州仪器(Ti)平台嵌入式开发基础

TI三相电机智能栅极驱动芯片特点分类

省选模拟（12.08） T3 圈圈圈圈圈圈圈圈

Hadoop生态圈技术栈（上）

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之6.Impala交互式查询

小猿圈之Linux下Mysql 操作命令

大数据Hadoop生态圈常用面试题

大数据开发基础入门与项目实战（三）Hadoop核心及生态圈技术栈之4.Hive DDL、DQL和数据操作

备战Noip2018模拟赛11（B组）T3 Monogatari 物语

【智能优化算法-圆圈搜索算法】基于圆圈搜索算法Circle Search Algorithm求解单目标优化问题附matlab代码

NYOJ 78 圈水池

递归问题 跑道 汽车 绕圈问题 Python实现

Hadoop生态圈（三）：MapReduce

立即
投稿

微信公众账号

微信扫一扫加关注

 返回
顶部