WEB通知和React Native之即时通讯(iOS Android)
一,需求分析
1.1,允许服务器主动发送信息给客户端,客户端能监听到并且能接收。
1.2,为了方便同一个系统内的用户可以指定某个用户可以私聊。
1.3,给指定用户或多个用户发送通知。
二,技术介绍
2.1.WebSocket介绍
1,WebSocket 是什么？
2,WebSocket 的作用
- WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
- HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
其他特点包括：
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
3,WebSocket 构造函数
WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。执行如下语句之后，客户端就会与服务器进行连接。
var ws = new WebSocket('ws://localhost:8080');
4,webSocket.readyState
- CONNECTING：值为0，表示正在连接。
- OPEN：值为1，表示连接成功，可以通信了。
- CLOSING：值为2，表示连接正在关闭。
- CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
5,webSocket.onopen
实例对象的onopen属性，用于指定连接成功后的回调函数。
ws.onopen = function () {
ws.send('Hello Server!');
}
如果要指定多个回调函数，可以使用addEventListener方法。
ws.addEventListener('open', function (event) {
ws.send('Hello Server!');
});
6,webSocket.send()
实例对象的send()方法用于向服务器发送数据。
(1)发送文本
ws.send('your message');
(2)发送 Blob 对象
var file = document
.querySelector('input[type="file"]')
.files[0];
ws.send(file);
(3)发送 ArrayBuffer 对象
// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
binary[i] = img.data[i];
}
ws.send(binary.buffer);
(4)发送json对象
var messageObj = {fromUserId:1,message:'您好,jackson影琪',toUserId:2};
var messageJson = JSON.stringify(messageObj);
ws.send(messageJson);
7,webSocket.onmessage
对象的onmessage属性，用于指定收到服务器数据后的回调函数。
ws.onmessage = function(event) {
var data = event.data;
// 处理数据
};
ws.addEventListener("message", function(event) {
var data = event.data;
// 处理数据
});
服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）
ws.onmessage = function(event){
if(typeof event.data === String) {
console.log("Received data string");
}
if(event.data instanceof ArrayBuffer){
var buffer = event.data;
console.log("Received arraybuffer");
}
}
8,webSocket.onclose
对象的onclose属性，用于指定连接关闭后的回调函数。
ws.onclose = function(event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
// handle close event
};
ws.addEventListener("close", function(event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
// handle close event
});
9,webSocket.onerror
对象的onerror属性，用于指定报错时的回调函数。
ws.onerror = function(event) {
// handle error event
};
ws.addEventListener("error", function(event) {
// handle error event
});
2.2,react-native-gifted-chat介绍
- messages(Array) - 消息数组，用于展示消息 有特定的格式
{
_id: 1, //消息的ID
text: 'My message', //发送的消息内容
createdAt: new Date(), //发送的时间
user: {/发送方的用户信息
_id: 2, //发送方的ID
name: 'Jackson', //发送方的昵称
avatar: 'https://pic.cnblogs.com/avatar/1040068/20181013100635.png',, //发送方的头像
},
image: 'https://pic.cnblogs.com/avatar/1040068/20181013100635.png',
//添加你所需要扩展的键值对
} - user(Object) - 配置用户信息
{
_id: 1, //发送消息需要和配置的id一致 avatar:'https://pic.cnblogs.com/avatar/1040068/20181013100635.png', //头像 若不设置则不显示
name:'jackson影琪', //昵称
} - renderBubble(Function) - 自定义气泡
//气泡
renderBubble(props) {
return (
<Bubble
{...props}
wrapperStyle={{
left: {//对方的气泡
backgroundColor: '#ffffff',
},
right: {//我方的气泡
backgroundColor: '#1fb922',
}
}}
/>
);
} - text(String) - 输入框的默认值；默认是undefined
- placeholder(String) - 输入框的占位字符
- messageIdGenerator(Function) - 为你的新消息自动生成一个id. 默认是用 UUID v4, 由uuid库实现uuid
- onSend(Function) - 点击send时的回调
- locale(String) -本地化日期
- timeFormat(String) - 格式化时间，默认是本地时间，即当前时区的时间
- dateFormat(String) - 日期格式化
- isAnimated(Bool) - 键盘出现时，是否有动画
- loadEarlier(Bool) - 是否显示加载更早的消息按钮 "Load earlier messages"
- onLoadEarlier(Function) - 加载更多消息时的回调
- isLoadingEarlier(Bool) - 点击加载更早的消息时是否出现转菊花的图标
- renderLoading(Function) - 加载页面未加载出来时的页面
//加载更多消息
loadEarlier={self.state.isMore}//
isLoadingEarlier={self.state.isMore}//
renderLoadEarlier={() => {
return (
<Text
onPress={self.onLoadEarlier}
style={[
styles.LookMoreStyle
]}
>{self.state.moreData}</Text>
);
}} - renderLoadEarlier(Function) - 配置 "Load earlier messages" 加载更早消息的按钮
- renderAvatar(Function) - 配置头像，如果设置'null'则头像都不显示
//头像
renderAvatar(props) {
return (
<Avatar
{...props}
/>
);
} - showUserAvatar(Bool) - 是否展示自己的头像，默认时false 只展示别人的头像
- onPressAvatar(Function(user)) - 点击头像时的回调
- renderAvatarOnTop(Bool) 头像显示在顶部还是底部，默认是底部
- renderSystemMessage(Function) - 自定义系统消息
- onLongPress(Function(context,message)) - 长按消息气泡时的回调，详细可以看github的演示 showActionSheetWithOptions()
- inverted(Bool) - 反转消息的显示顺序，默认是true 即消息显示的顺序是否和你message数组的顺序相同
- renderMessage(Function) - 自定义消息的内容View
- renderMessageText(Function) - 自定义消息的文本
- renderMessageImage(Function) - 自定义图片消息
- imageProps(Object) - 额外的属性要传递给默认创建的组件rendermessageimage点去去查看文档
- lightboxProps(Object) - 额外的属性传递给Modal框(体现在点击图片的Modal)
- 点击查看第三方 - Lightbox
- renderCustomView(Function) - 在气泡内创建一个自己自定义的视图，即创建自定义的消息
- renderDay(Function) - 自定义消息上方的日期
- renderTime(Function) - 自定义消息中的时间
- renderFooter(Function) - 自定义listView的底部, 例如.'User is typing...'; 点击查看示例 example/App.js for an example
- renderChatFooter(Function) - 自定义组件的渲染下messagecontainer（从ListView分开）
- renderInputToolbar(Function) - 自定义你的底部工具栏
- renderComposer(Function) - 自定义textInput输入框
- renderActions(Function) - 自定义输入框左边的按钮
- renderSend(Function) -自定义发送按钮；您可以很容易地将子组件传递给原始组件，例如使用自定义图标。
- renderAccessory(Function) - 在消息编辑器下面的自定义第二行操作
- onPressActionButton\(Function) - 当点击输入框左边的按钮时的回调 (如果设置了 actionSheet将不会执行)
- bottomOffset(Integer) - 从屏幕底部的聊天距离（如显示选项卡栏，则非常有用）
- minInputToolbarHeight(Integer) - 工具栏的最小高度，默认是44
- listViewProps(Object) - 列表的属性，用于扩展你的列表
listViewProps={{
// //ListView/FlatView中标识是否可以加载更多(当现在获取到的数据已经是全部了,不能再继续获取数据了,则设为false,当还有数据可以获取则设为true)
canLoad: true,
//标识现在是否ListView/FlatView现在正在加载(根据这个值来决定是否显示"正在加载的cell")(loadMore()方法进去后设为true,fetch加载完数据后设为false)
isLoadding: false,
//是否显示下拉刷新的cell
ifShowRefresh: true,
//ListView/FlatList是否可以滚动
scrollEnabled: true,
//记录当前加载到了哪一页
page: 1,
onScroll:self._onScroll.bind(this)
}} - textInputProps(Object) - 输入框的属性，用于扩展你的输入框
- keyboardShouldPersistTaps(Enum) - 确定键盘在敲击后是否应该保持可见。一个枚举; 详情见 <ScrollView>
- onInputTextChanged(Function) - 输入框编辑时的回调
- maxInputLength(Integer) - 输入框输入的最多字符数
- showAvatarForEveryMessage(Bool) - 默认是false每条消息都显示头像
系统消息格式
{
_id: 1,
text: 'This is a system message',
createdAt: new Date(),
system: true,
// Any additional custom parameters are passed through
}
三,即时通讯实现
3.1,实现步骤
第一步:建立链接
componentWillMount() {
let self = this;
//建立链接
ws = new WebSocket('ws://127.0.0.1:8080/websocket/'+str);
ws.onopen = (evt) => {
// 打开一个连接
// console.log('WebSocket==' + evt)
alert("连接成功啦")
//ws.send('something'); // 发送一个消息
};
ws.onmessage = (e) => {
// }
// 接收到了一个消息
//alert(JSON.parse(e.data).text)
console.log('e.data==' + e.data);
};
ws.onerror = (e) => {
// 发生了一个错误
console.log('e.message==' + e.message);
};
ws.onclose = (e) => {
// 连接被关闭了
console.log('e.code===' + e.code, 'e.reason===' + e.reason);
};
}
第二步:发送消息
onSend(messages = []) {
let self = this
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messages),
}))
// alert(messages[0].text)
this.doSend(messages[0].text)
}
// 发送消息
doSend = (message) => {
var messageObj = {
fromUserId: this.state.userData._id,
fromNickName: this.state.userData.name,
message: message,
toUserId: this.props.Account.id,
toNickName: this.props.Account.name,
sendTime: new Date()
};
var messageJson = JSON.stringify(messageObj);
ws.send(messageJson);
}
第三步:接收消息
ws.onmessage = (e) => {
// {
// _id: 1, //消息的ID
// text: 'My message', //发送的消息内容
// createdAt: new Date(), //发送的时间
// user: {/发送方的用户信息
// _id: 2, //发送方的ID
// name: 'Jackson', //发送方的昵称
// avatar: 'https://pic.cnblogs.com/avatar/1040068/20181013100635.png',, //发送方的头像
// },
// }
// 接收到了一个消息
//alert(JSON.parse(e.data).text)
console.log('e.data==' + e.data);
}
第四步:关闭链接
componentWillUnmount() {
ws.close()
this.setState = (state, callback) => {
return;
};
}
3.2.聊天界面构建
1,使用react-native-gifted-chat,安装
npm install react-native-gifted-chat --save
2,引入使用
/**
* Created by Jackson on 2018/11/12.
* 聊天界面
*/
import React, { PureComponent } from 'react';
import {
View,
Text,
StyleSheet,
TouchableOpacity,
Keyboard,
Platform,
StatusBar
} from 'react-native';
//聊天
import { GiftedChat, Bubble, Avatar } from 'react-native-gifted-chat'
export default class ChatBox extends PureComponent {
constructor(props) {
super(props);
this.renderBubble = this.renderBubble.bind(this);
this.renderAvatar = this.renderAvatar.bind(this);
this.state = {
//聊天
messages: [],
userData: {
_id: 1,
name:'jackson影琪',
avatar: 'https://pic.cnblogs.com/avatar/1040068/20181013100635.png',
},
messageId: 1,
} }
componentDidMount() {
let self = this
/****************************聊天组件 start **************************************************/
setTimeout(function(){
self.setState({
messages: [ {
_id: 2,
text: '微信小程序开发的基本流程',
createdAt: new Date('2018-10-25T15:41:00+08:00'),
user: {
_id: 1,
name: 'jackson影琪',
avatar: 'https://pic.cnblogs.com/avatar/1040068/20181013100635.png',
},
//image: 'https://img2018.cnblogs.com/blog/1040068/201810/1040068-20181024162047704-1159291775.png',
},
{
_id: 1,
text: 'Hello jackson影琪',
createdAt: new Date('2016-06-07T10:00:00+08:00'),
user: {
_id: 2,
name: 'jackson',
avatar: 'https://img2018.cnblogs.com/blog/1040068/201811/1040068-20181101192529807-2132606645.jpg'
},
image: 'https://pic.cnblogs.com/avatar/1040068/20181013100635.png',
},
],
})
},2000)
/****************************聊天组件 end **************************************************/ } /****************************聊天 start **************************************************/
onSend(messages = []) {
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messages),
}))
// alert(messages[0].text)
let self = this
self.state.messageId += 2
let m = {
_id: self.state.messageId,
text: '前端知识点总结(HTML)',
createdAt: new Date(),
user: {
_id: 2,
name: '',
avatar: 'https://img2018.cnblogs.com/blog/1040068/201811/1040068-20181101192529807-2132606645.jpg'
},
image: 'https://img2018.cnblogs.com/blog/1040068/201811/1040068-20181109115100292-977588541.png',
}
self.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, m),
}))
}
//气泡
renderBubble(props) {
return (
<Bubble
{...props}
wrapperStyle={{
left: {
backgroundColor: '#ffffff',
},
right: {
backgroundColor: '#1fb922',
}
}}
/>
);
}
//头像
renderAvatar(props) {
return (
<Avatar
{...props}
/>
);
}
/****************************聊天 end **************************************************/
render() {
let self = this;
return (
<TouchableOpacity
activeOpacity={1}
style={{ flex: 1,}}
onPress={() => { Keyboard.dismiss() }}
> {/* //聊天 */}
<GiftedChat
// onPressAvatar={()=>{alert('Keyboard.dismiss'); Keyboard.dismiss()}}
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
renderBubble={this.renderBubble}//气泡
renderAvatar={this.renderAvatar}//头像
showUserAvatar={true}//是否显示自己的头像,默认不显示
//onLongPress={()=>{alert('onLongPress')}}//长按消息
// 输入组件
placeholder={'请输入内容'}//输入框占位符
// label={'发送'}
containerStyle={{ marginBottom: 2 }}//发送按钮
children={
<View
style={[
styles.buttonBoxBorder
]}
>
<Text
style={[
styles.buttonText,
]}
>发送</Text>
</View>
}
// textStyle={{ color: '#70b24e' }}//按钮字的颜色
timeFormat={'MM月DD日 HH:mm:ss'}//格式化日前
dateFormat={'YYYY年MM月DD日'}
// locale={'zh-cn'}
isAnimated={true}
// renderAvatarOnTop={true}
user={this.state.userData}//用户信息
/>
</TouchableOpacity>
)
} } const styles = StyleSheet.create({
buttonText: {
paddingHorizontal: 15,
paddingVertical: 5,
textAlign: 'center',
color: '#fff',
fontSize: 14
},
buttonBoxBorder: {
overflow: 'hidden',
borderRadius: 5,
borderWidth: 1,
backgroundColor: "#70b24e",
borderColor: "#70b24e",
marginRight: 12,
marginBottom: 6,
},
})
效果如下：
3.3,使用的方法
1,下拉加载更多
{/* //聊天 */}
<GiftedChat
// onPressAvatar={()=>{alert('Keyboard.dismiss'); Keyboard.dismiss()}}
messages={this.state.messages}
onSend={messages => this.onSend(messages)}//发送消息
...
//加载更多消息
loadEarlier={self.state.isMore}//
isLoadingEarlier={self.state.isMore}//
renderLoadEarlier={() => {
return (
<Text
onPress={self.onLoadEarlier}
style={[
styles.LookMoreStyle
]}
>{self.state.moreData}</Text>
);
}}
listViewProps={{
// //ListView/FlatView中标识是否可以加载更多(当现在获取到的数据已经是全部了,不能再继续获取数据了,则设为false,当还有数据可以获取则设为true)
canLoad: true,
//标识现在是否ListView/FlatView现在正在加载(根据这个值来决定是否显示"正在加载的cell")(loadMore()方法进去后设为true,fetch加载完数据后设为false)
isLoadding: false,
//是否显示下拉刷新的cell
ifShowRefresh: true,
//ListView/FlatList是否可以滚动
scrollEnabled: true,
//记录当前加载到了哪一页
page: 1,
onScroll:self._onScroll.bind(this)
}}
/>
//加载更早的数据
onLoadEarlier = () => {
let self = this;
self.state.Currentpage += 1;
self.setState({
isMore: true,
moreData: '正在加载更多...'
})
self.getMessageData()
} //上拉加载//翻页
_onScroll(event) {
let self = this
let y = event.nativeEvent.contentOffset.y;
let height = event.nativeEvent.layoutMeasurement.height;
let contentHeight = event.nativeEvent.contentSize.height;
if (y + height >= contentHeight - 20 && y > 0 && this.state.contentHeight != contentHeight) {//上啦下一页
self.state.contentHeight=contentHeight
self.onLoadEarlier() }
else if (y < 0 || y == 0) {//下拉上一页ios }
}
2,在消息前后追加消息
//prepend(),在父级最前面追加一个子元素
self.setState(previousState => ({
messages: GiftedChat.prepend(previousState.messages, ReceivedMessageData),
})) //append(),在父级最后追加一个子元素
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messages),
}))
3,完整代码
{/* //聊天 */}
<GiftedChat
// onPressAvatar={()=>{alert('Keyboard.dismiss'); Keyboard.dismiss()}}
messages={this.state.messages}
onSend={messages => this.onSend(messages)}//发送消息
renderBubble={this.renderBubble}//气泡
renderAvatar={this.renderAvatar}//头像
showUserAvatar={true}// 显示发送方的头像
showAvatarForEveryMessage={true}//每条消息都显示头像
//onLongPress={()=>{alert('onLongPress')}}
// 输入组件
placeholder={'请输入内容'}
// label={'发送'}
containerStyle={{ marginBottom: 2 }}
children={
<View
style={[
styles.buttonBoxBorder
]}
>
<Text
style={[
styles.buttonText,
]}
>发送</Text>
</View>
}//渲染发送按钮
// textStyle={{ color: '#70b24e' }}
timeFormat={'MM月DD日 HH:mm:ss'}
dateFormat={'YYYY年MM月DD日'}
// locale={'zh-cn'}
isAnimated={true}
// renderAvatarOnTop={true}
user={this.state.userData}
// 系统消息样式
wrapperStyle={{ paddingLeft: 12, paddingRight: 12 }}
textStyle={{ lineHeight: 20 }}
//加载更多消息
loadEarlier={self.state.isMore}//
isLoadingEarlier={self.state.isMore}//
renderLoadEarlier={() => {
return (
<Text
onPress={self.onLoadEarlier}
style={[
styles.LookMoreStyle
]}
>{self.state.moreData}</Text>
);
}}
listViewProps={{
// //ListView/FlatView中标识是否可以加载更多(当现在获取到的数据已经是全部了,不能再继续获取数据了,则设为false,当还有数据可以获取则设为true)
canLoad: true,
//标识现在是否ListView/FlatView现在正在加载(根据这个值来决定是否显示"正在加载的cell")(loadMore()方法进去后设为true,fetch加载完数据后设为false)
isLoadding: false,
//是否显示下拉刷新的cell
ifShowRefresh: true,
//ListView/FlatList是否可以滚动
scrollEnabled: true,
//记录当前加载到了哪一页
page: 1,
onScroll:self._onScroll.bind(this)
}}
/>
效果展示：
注意:
1,如下格式的图片链接不能正常显示
avatar: 'http://img3.imgtn.bdimg.com/it/u=1614455141,2952757874&fm=26&gp=0.jpg',
四,后台实现
4.1,Java spring cloud实现
Java 的 web 一般都依托于 servlet 容器。Tomcat、Jetty、Resin等。Spring 框架对 WebSocket 也提供了支持。
1.Spring 对于 WebSocket 的支持基于下面的 jar 包：
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>spring-websocket</artifactId>
<version>${spring.version}</version>
</dependency>
2.Spring 在收到 WebSocket 事件时，会自动调用事件对应的方法。
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Date;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
public class WebSocketService { private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketService.class);
// ... }
3.完整代码实现
...
public class WebSocketService {
private static final Logger LOGGER = LoggerFactory.getLogger(WebSocketService.class);
public static Map<String, Session> sessionMap = new ConcurrentHashMap<String, Session>();
private HcAppchatService hcAppchatService = SpringContextHandler.getBean(HcAppchatService.class);
/**
* 建立连接后触发的回调
*/
@OnOpen
public void onOpen(@PathParam("userId") String userId, Session session) {
LOGGER.info("聊天打开onOpen：userId={}", userId);
if (sessionMap == null) {
sessionMap = new ConcurrentHashMap<String, Session>();
}
/**
* 断开连接后触发的回调
*/
@OnClose
public void OnClose(@PathParam("userId") String userId) {
LOGGER.info("聊天关闭OnClose：userId={}", userId);
sessionMap.remove(userId);
}
/**
* 收到消息时触发的回调
*/
@OnMessage
public void OnMessage(@PathParam("userId") String userId, Session session, String message) throws IOException{
LOGGER.info("发送消息：userId={}", userId);
LOGGER.info("发送消息：message={}", message);
HcAppchat hcAppchat = JSON.parseObject(message, HcAppchat.class);
sendMessageTo(hcAppchat);
//sendMessageAll(message);
}
/**
* 传输消息出错时触发的回调
*/
@OnError
public void error(Session session, Throwable t) {
LOGGER.error("socket通讯出现异常:", t.getMessage());
t.printStackTrace();
}
public void sendMessageTo(HcAppchat hcAppchat) throws IOException {
Session se = sessionMap.get(String.valueOf(hcAppchat.getAcceptId()));
Date now = new Date();
hcAppchat.setCreateDate(now);
if(se != null){
WebMessage webms = new WebMessage();
hcAppchat.setStatus(1);
boolean result = hcAppchatService.insert(hcAppchat);
LOGGER.info("用户在线，直接发送消息：result={}", result);
webms.setId(hcAppchat.getId());
webms.setCreatedAt(DateUtil.dateStr(now, "yyyy-MM-dd HH:mm:ss"));
webms.setText(hcAppchat.getText());
User user = hcAppchatService.queryUserInfo(hcAppchat.getSendId());
webms.setUser(user);
LOGGER.info("发送消息给【" + user.getName() + "】, message={}", JSON.toJSONString(webms));
se.getAsyncRemote().sendText(JSON.toJSONString(webms));
}else{
hcAppchat.setStatus(0);
boolean result = hcAppchatService.insert(hcAppchat);
if(result){
LOGGER.info("接受消息用户不在线，将消息保存数据库成功！");
}else{
LOGGER.info("接受消息用户不在线，将消息保存数据库失败！");
}
}
}
se.getAsyncRemote().sendText(message);
}
}
}
4.2,nodeJS实现
常用的 Node 实现有以下三种。
下面以socket.io为例
var IO = require('socket.io');
//var dbservice = require('./services/db_mssql.js');//链接数据库
//var settingConfig = require('./config/settingConfig.js');//解析存储过程
//var dbName = settingConfig.getValueByKey("dbName");
var socketFun = function (server) {
var socketIO = IO(server);
var userSockets = {};
socketIO.on('connection', function (socket) {
//已建立链接 加入
socket.on('join', function (userId) {
socket.userId = userId;
userSockets[userId] = socket;
})
//发送通知
socket.on('notification', function (json) {
if (socket.userId == undefined) {
socket.emit('notification', {
"httpCode": 500,
"message": "请登录后再发送消息",
"data": {}
});
return;
}
//var spName = "存储过程的代称";
json.createPeopleId = socket.userId;
//支持多人接收消息
var receivePeopleIds = [];
if (json.receivePeopleId!=null)
receivePeopleIds = json.receivePeopleId.split(';');
for (var i = 0; i < receivePeopleIds.length; i++) {
var json = {
"receivePeopleId": receivePeopleIds[i],
"content": json.content,
"url": json.url,
"creatPeopleId": json.creatPeopleId
};
console.log('-------json---------',json);
//dbservice.operateDatabase(dbName, spName, json, function (data) {//存进数据库
//console.log(data);
//});
var otherSocket = userSockets[json.receivePeopleId]
if (otherSocket != null) {
otherSocket.emit('notification', {
"httpCode": 200,
"message": "",
"data": json
});
}
}
});
//关闭链接
socket.on('disconnect', function () {
var userId = socket.userId;
delete userSockets[userId];
});
})
}
module.exports = socketFun;
web端调用实例
var socket = io('ws://127.0.0.1:3000');//链接消息系统
socket.on('connect', function () {//建立链接
socket.emit('join', userId);
console.log('1')
});
var json = {
"receivePeopleId": createId,
"content": content,
"url": TaskUrl,
"creatPeopleId": d.CreateUserId
};
socket.emit('notification', json);//发送通知