WEB通知和React Native之即時通訊(iOS Android)

一,需求分析

1.1,允許服務器主動發送信息給客戶端,客戶端能監聽到並且能接收。

1.2,為了方便同一個系統內的用戶可以指定某個用戶可以私聊。

1.3,給指定用戶或多個用戶發送通知。

二,技術介紹

2.1.WebSocket介紹

1,WebSocket 是什么？

• WebSocket 是一種網絡通信協議。RFC6455 定義了它的通信標准。
• WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。

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介紹

1. 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',
     //添加你所需要擴展的鍵值對
         }

2. user(Object) - 配置用戶信息

   {
       _id: 1, //發送消息需要和配置的id一致  avatar:'https://pic.cnblogs.com/avatar/1040068/20181013100635.png', //頭像 若不設置則不顯示
       name:'jackson影琪', //昵稱
    }

3. renderBubble(Function) - 自定義氣泡

   //氣泡
       renderBubble(props) {
         return (
           <Bubble
             {...props}
             wrapperStyle={{
              left: {//對方的氣泡
                backgroundColor: '#ffffff',
              },
             right: {//我方的氣泡
                backgroundColor: '#1fb922',
              }
           }}
          />
        );
    }

4. text(String) - 輸入框的默認值；默認是undefined
5. placeholder(String) - 輸入框的占位字符
6. messageIdGenerator(Function) - 為你的新消息自動生成一個id. 默認是用 UUID v4, 由uuid庫實現uuid
7. onSend(Function) - 點擊send時的回調
8. locale(String) -本地化日期
9. timeFormat(String) - 格式化時間，默認是本地時間，即當前時區的時間
10. dateFormat(String) - 日期格式化
11. isAnimated(Bool) - 鍵盤出現時，是否有動畫
12. loadEarlier(Bool) - 是否顯示加載更早的消息按鈕 "Load earlier messages"
13. onLoadEarlier(Function) - 加載更多消息時的回調
14. isLoadingEarlier(Bool) - 點擊加載更早的消息時是否出現轉菊花的圖標
15. renderLoading(Function) - 加載頁面未加載出來時的頁面

     //加載更多消息
              loadEarlier={self.state.isMore}//
              isLoadingEarlier={self.state.isMore}//
              renderLoadEarlier={() => {
                return (
                  <Text
                    onPress={self.onLoadEarlier}
                    style={[
                      styles.LookMoreStyle
                    ]}
                  >{self.state.moreData}</Text>
                );
              }}

16. renderLoadEarlier(Function) - 配置 "Load earlier messages" 加載更早消息的按鈕
17. renderAvatar(Function) - 配置頭像，如果設置'null'則頭像都不顯示

    //頭像
      renderAvatar(props) {
        return (
          <Avatar
            {...props}
          />
        );
      }

18. showUserAvatar(Bool) - 是否展示自己的頭像，默認時false 只展示別人的頭像
19. onPressAvatar(Function(user)) - 點擊頭像時的回調
20. renderAvatarOnTop(Bool) 頭像顯示在頂部還是底部，默認是底部
21. renderSystemMessage(Function) - 自定義系統消息
22. onLongPress(Function(context,message)) - 長按消息氣泡時的回調，詳細可以看github的演示 showActionSheetWithOptions()
23. inverted(Bool) - 反轉消息的顯示順序，默認是true 即消息顯示的順序是否和你message數組的順序相同
24. renderMessage(Function) - 自定義消息的內容View
25. renderMessageText(Function) - 自定義消息的文本
26. renderMessageImage(Function) - 自定義圖片消息
27. imageProps(Object) - 額外的屬性要傳遞給默認創建的組件rendermessageimage點去去查看文檔
28. lightboxProps(Object) - 額外的屬性傳遞給Modal框(體現在點擊圖片的Modal)
29. 點擊查看第三方 - Lightbox
30. renderCustomView(Function) - 在氣泡內創建一個自己自定義的視圖，即創建自定義的消息
31. renderDay(Function) - 自定義消息上方的日期
32. renderTime(Function) - 自定義消息中的時間
33. renderFooter(Function) - 自定義listView的底部, 例如.'User is typing...'; 點擊查看示例 example/App.js for an example
34. renderChatFooter(Function) - 自定義組件的渲染下messagecontainer（從ListView分開）
35. renderInputToolbar(Function) - 自定義你的底部工具欄
36. renderComposer(Function) - 自定義textInput輸入框
37. renderActions(Function) - 自定義輸入框左邊的按鈕
38. renderSend(Function) -自定義發送按鈕；您可以很容易地將子組件傳遞給原始組件，例如使用自定義圖標。
39. renderAccessory(Function) - 在消息編輯器下面的自定義第二行操作
40. onPressActionButton\(Function) - 當點擊輸入框左邊的按鈕時的回調 (如果設置了 actionSheet將不會執行)
41. bottomOffset(Integer) - 從屏幕底部的聊天距離（如顯示選項卡欄，則非常有用）
42. minInputToolbarHeight(Integer) - 工具欄的最小高度，默認是44
43. 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)
              }}

44. textInputProps(Object) - 輸入框的屬性，用於擴展你的輸入框
45. keyboardShouldPersistTaps(Enum) - 確定鍵盤在敲擊后是否應該保持可見。一個枚舉; 詳情見 <ScrollView>
46. onInputTextChanged(Function) - 輸入框編輯時的回調
47. maxInputLength(Integer) - 輸入框輸入的最多字符數
48. 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 實現有以下三種。

• µWebSockets
• Socket.IO
• WebSocket-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);//發送通知