Fork me on GitHub

简版在线聊天Websocket

序言

  • What is Webscoket ?

  • websocket 应用场景

  • 简版群聊实现

  • 代码例子

  • 小结

Webscoket

Websokcet 是一种单个TCP连接上进行全双工通信的协议,通过HTTP/1.1 协议的101状态码进行握手。

http://websocket.org

Websocket 应用场景

Websocket 和 http 协议都是web通讯协议,两者有何区别?先说Http,它是一种请求响应协议,这种模型决定了,只能客户端请求,服务端被动回答。如果我们有服务端主动推送给客户端的需求怎么办?比如一个股票网站,我们会选择主动轮询,也就是”拉模式“。

大家可以思考下主动轮询带来的问题是什么?

主动轮询其实会产生大量无效请求,增加了服务器压力。

由此,websocket 协议的补充,为我们带来了新的解决思路。

简版群聊实现

利用Websocket 实现一个简陋群聊功能,加深一下Websocket 理解。

  1. 假设李雷和韩梅梅都登录在线;
  2. 李雷通过浏览器发送消息转nginx 代理到Ws服务器;
  3. Ws服务器加载所有在线会话广播消息;
  4. 韩梅梅接受到消息。

0_ws

代码例子

后端(shop-server)

引入pom.xml 依赖

1
2
3
4
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

配置类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
package com.onlythinking.shop.websocket;

import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
* <p> The describe </p>
*
* @author Li Xingping
*/
@Slf4j
@Configuration
public class WebSocketConfiguration {

@Bean
public ServerEndpointExporter endpointExporter() {
return new ServerEndpointExporter();
}

}

接受请求端点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
package com.onlythinking.shop.websocket;

import com.alibaba.fastjson.JSON;
import com.google.common.collect.Maps;
import com.onlythinking.shop.websocket.handler.ChatWsHandler;
import com.onlythinking.shop.websocket.handler.KfWsHandler;
import com.onlythinking.shop.websocket.handler.WsHandler;
import com.onlythinking.shop.websocket.store.WsReqPayLoad;
import com.onlythinking.shop.websocket.store.WsRespPayLoad;
import com.onlythinking.shop.websocket.store.WsStore;
import com.onlythinking.shop.websocket.store.WsUser;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Map;

/**
* <p> The describe </p>
*
* @author Li Xingping
*/
@Slf4j
@Component
@ServerEndpoint("/ws")
public class WebsocketServerEndpoint {

private static Map<String, WsHandler> wsHandler = Maps.newConcurrentMap();

static {
wsHandler.put("robot", new KfWsHandler());
wsHandler.put("chat", new ChatWsHandler());
}

@OnOpen
public void onOpen(Session session) {
log.info("New ws connection {} ", session.getId());
WsStore.put(session.getId(), WsUser.builder().id(session.getId()).session(session).build());
respMsg(session, WsRespPayLoad.ok().toJson());
}

@OnClose
public void onClose(Session session, CloseReason closeReason) {
WsStore.remove(session.getId());
log.warn("ws closed,reason:{}", closeReason);
}

@OnMessage
public void onMessage(String message, Session session) {
log.info("accept client messages: {}" + message);
WsReqPayLoad payLoad = JSON.parseObject(message, WsReqPayLoad.class);
if (StringUtils.isBlank(payLoad.getType())) {
respMsg(session, WsRespPayLoad.ofError("Type is null.").toJson());
return;
}
WsUser wsUser = WsStore.get(session.getId());
if (null == wsUser || StringUtils.isBlank(wsUser.getUsername())) {
WsStore.put(session.getId(), WsUser.builder()
.id(session.getId())
.username(payLoad.getUsername())
.avatar(payLoad.getAvatar())
.session(session)
.build()
);
}
WsHandler handler = wsHandler.get(payLoad.getType());
if (null != handler) {
WsRespPayLoad resp = handler.onMessage(session, payLoad);
if (null != resp) {
respMsg(session, resp.toJson());
}
} else {
respMsg(session, WsRespPayLoad.ok().toJson());
}
}

@OnError
public void onError(Session session, Throwable e) {
WsStore.remove(session.getId());
log.error("WS Error: ", e);
}

private void respMsg(Session session, String content) {
try {
session.getBasicRemote().sendText(content);
} catch (IOException e) {
log.error("Ws resp msg error {} {}", content, e);
}
}
}

聊天业务处理器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
package com.onlythinking.shop.websocket.handler;

import com.onlythinking.shop.websocket.store.*;
import lombok.extern.slf4j.Slf4j;

import javax.websocket.Session;
import java.util.Date;
import java.util.List;

/**
* <p> The describe </p>
*
* @author Li Xingping
*/
@Slf4j
public class ChatWsHandler implements WsHandler {

@Override
public WsRespPayLoad onMessage(Session session, WsReqPayLoad payLoad) {
// 广播消息
List<WsUser> allSessions = WsStore.getAll();
for (WsUser s : allSessions) {
WsRespPayLoad resp = WsRespPayLoad.builder()
.data(
WsChatResp.builder()
.username(payLoad.getUsername())
.avatar(payLoad.getAvatar())
.msg(payLoad.getData())
.createdTime(new Date())
.self(s.getId().equals(session.getId()))
.build()
)
.build();
log.info("Broadcast message {} {} ", s.getId(), s.getUsername());
s.getSession().getAsyncRemote().sendText(resp.toJson());
}
return null;
}
}

前端(shop-web-mgt)

引入依赖

1
npm install vue-native-websocket --save

添加Store

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import Vue from 'vue'

const ws = {
state: {
wsData: {
hasNewMsg: false,
},
socket: {
isConnected: false,
message: '',
reconnectError: false,
}
},
mutations: {
SET_WSDATA(state, data) {
state.wsData.hasNewMsg = data.hasNewMsg
},
RESET_WSDATA(state, data) {
state.wsData.hasNewMsg = false
},
SOCKET_ONOPEN(state, event) {
Vue.prototype.$socket = event.currentTarget;
state.socket.isConnected = true
},
SOCKET_ONCLOSE(state, event) {
state.socket.isConnected = false
},
SOCKET_ONERROR(state, event) {
console.error(state, event)
},
// default handler called for all methods
SOCKET_ONMESSAGE(state, message) {
state.socket.message = message
},
// mutations for reconnect methods
SOCKET_RECONNECT(state, count) {
console.info(state, count)
},
SOCKET_RECONNECT_ERROR(state) {
state.socket.reconnectError = true;
},
},
actions: {
AskRobot({rootGetters}, data) {
return new Promise((resolve, reject) => {
console.log('Ask robot msg', data);
const payLoad = {
type: 'robot',
username: rootGetters.loginName,
data: data
};
Vue.prototype.$socket.sendObj(payLoad)
resolve(1)
})
},
SendChatMsg({rootGetters}, data) {
return new Promise((resolve, reject) => {
console.log('Send chat msg', data);
const payLoad = {
type: 'chat',
username: rootGetters.loginName,
data: data
};
Vue.prototype.$socket.sendObj(payLoad)
resolve(1)
})
},
MessageRead({commit, state}, data) {
commit('RESET_WSDATA', {})
},
}
};

export default ws

编写组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
<template>
<div>
<ot-drawer
title="聊天"
:visible.sync="chatVisible"
direction="rtl"
:before-close="handleClose">
<div class="chat-body">
<div id="msgList" style="margin-bottom: 200px" class="chat-msg">
<div class="chat-msg-item" v-for="item in msgList">
<div v-if="!item.self">
<div class="msg-header">
<img
:src="baseUrl+'/api/insecure/avatar?code='+item.avatar+'&size=64'"
class="user-avatar"
>
<span class="avatar-name">{{item.username}}</span>&nbsp;&nbsp;
<div style="display: inline-block; float: right">
{{item.createdTime | parseTime('{h}:{i}')}}
</div>
</div>
<div class="msg-body" style="float: left;">
{{item.msg}}
</div>
</div>
<div v-else>
<div class="msg-header clearfix">
<img
:src="baseUrl+'/api/insecure/avatar?code='+item.avatar+'&size=64'"
class="user-avatar"
style="float: right"
>
</div>
<div class="msg-body" style="float: right;background-color: #67C23A">
{{item.msg}}
</div>
</div>
</div>
</div>
</div>
<div class="chat-send">
<el-input
v-model="text"
autocomplete="off"
placeholder="请输入你想说的内容..."
@keyup.enter.native="handleSendMsg"
></el-input>
<div class="chat-btns">

<el-button
class="action-item"
@click="handleClearMsg"
>清空
</el-button>
<el-button
type="success"
class="action-item"
@click="handleSendMsg"
v-scroll-to="{ el: '#msgList', offset: 140 }"
>发送
</el-button>
</div>
</div>
</ot-drawer>
</div>
</template>

<script>

import {mapGetters} from 'vuex'
import store from '@/store'
import {config} from '@/utils/config'
import OtDrawer from '@/components/OtDrawer'
import Cookies from 'js-cookie'

export default {
name: 'UserChat',
components: {OtDrawer},
props: {
visible: {
type: Boolean,
default: false
}
},
data() {
return {
baseUrl: config.baseUrl,
text: '',
msgList: [],
}
},
computed: {
...mapGetters([
'roles', 'isConnected', 'message', 'reconnectError'
]),
chatVisible: {
get() {
return this.visible
},
set(val) {
this.$emit('update:visible', val)
}
}
},
beforeDestroy() {
if (this.isConnected) {
this.$disconnect()
}
},
mounted() {
console.log('Chat mounted.')
if (!this.isConnected) {
this.$connect(config.wsUrl, {
format: 'json',
store: store
})
}
// 监听消息接收
this.$options.sockets.onmessage = (res) => {
const data = JSON.parse(res.data);
console.log('收到消息', data);
if (data.code === 0) {
// 连接建立成功
if (!data.data.msg) {
return;
}
this.msgList.push(data.data)
} else if (data.code === 400) {
this.$message({
type: 'warning',
message: data.data
})
}
};
},
methods: {
handleSendMsg() {
if (!this.text) {
this.$message({
type: 'warning',
message: '请输入内容'
});
return;
}
this.$store.dispatch('SendChatMsg', this.text).then(data => {
this.text = ''
})
},
handleClearMsg() {
this.msgList = [];
Cookies.remove('chatMsg');
// 删除
},
// 聊天关闭前
handleClose() {
// 缓存消息到本地
Cookies.set('chatMsg', JSON.stringify(this.msgList));
this.$emit('update:visible', false)
}
},
created() {
// 加载缓存数据
const chatMsg = Cookies.get('chatMsg');
if (chatMsg) {
this.msgList = JSON.parse(chatMsg);
}
}
}
</script>

<style>
.el-drawer__body {
height: 100%;
box-sizing: border-box;
overflow-y: auto;
background-color: rgba(244, 244, 244, 1);
scroll-snap-type: y proximity;
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>

.user-avatar {
width: 20px;
height: 20px;
border-radius: 4px;
vertical-align: middle;
}

.msg-header {
font-size: 12px;
color: rgba(109, 114, 120, 1);
}

.avatar-name {
vertical-align: middle;
}

.msg-body {
text-align: center;
max-width: 300px;
min-width: 100px;
word-wrap: break-word;

margin: 4px 0;
padding: 4px;
line-height: 24px;
border-radius: 4px;
background-color: rgba(255, 255, 255, 1);
}

.chat-body {
height: 100%;
position: relative;
}

.chat-msg {
padding: 10px;

.chat-msg-item {
margin-top: 10px;
height: 65px;
}
}

.chat-send {
padding: 20px;
background-color: rgba(255, 255, 255, 1);
position: absolute;
left: 50%;
width: 100%;
transform: translateX(-50%);
bottom: 0px;
}

.chat-btns {
text-align: center;
}

.action-item {
margin-top: 10px;
}
</style>

Nginx 代理配置 nginx.conf (如有需要可添加)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}

upstream websocket {
server 127.0.0.1:8300;
}

server {
server_name shop-web-mgt.onlythinking.com;
listen 443 ssl;
location / {
proxy_pass http://websocket;
proxy_read_timeout 300s;
proxy_send_timeout 300s;

proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
ssl_certificate /etc/data/shop-web-mgt.onlythinking.com/full.pem;
ssl_certificate_key /etc/data/shop-web-mgt.onlythinking.com/privkey.pem;
}

实现效果图

界面比较丑,因为不太擅长,请大家别见笑!!

1_ws

2_ws

3_ws

项目地址

https://github.com/cuteJ/shop-server (后端)

https://github.com/cuteJ/shop-web-mgt (前端)

项目演示地址

http://shop-web-mgt.onlythinking.com

小结

该篇学习Websocket,以此简单Demo加深印象!