第一次寫小程序，老板就讓我用websoket寫個聊天對話，群聊這種。第一次寫聊天功能，第一次用websoket,第一次用小程序，這是在考驗我嗎？不過我還是研究了一下，終于實現了。

首先看一下界面，界面很簡單，就是首頁剛進來獲取了用戶信息頭像，昵稱等。點擊進入聊天室就可以聊天了,下面我介紹的是前端代碼實現，后臺需要做的很簡單，就是你給他發送什么數據，他就給你返回什么數據，就是在接收前臺發送過來的圖片的時候需要做個格式轉換，因為有時候前端將接收到的json字符串轉換json對象的時候，遇到有特殊的標點符號可能會報錯，比如我就是‘/'報的錯，找了半天。

因為有人咨詢，所以附上所有小程序代碼，地址：https://github.com/chongwenwen/weixin_chat/tree/master

有人說為什么沒有utile.js的代碼，這個功能只用到websoket.js跟utile.js沒有關系哦！還有后臺代碼在頁面最底下

文檔目錄結構如下：（聊天頁面為chat）

chat.wxml頁面

首先寫好頁面結構,既然是群聊功能，肯定有自己和別人，所以頁面的view盒子應給有兩部分，一個內容左側顯示，一個內容右側顯示，下面是代碼，因為沒有正式注冊企業項目，我用的服務器都是本地的服務器，所以界面區分別人和我的聊天信息是用昵稱區分的，如果正式項目應該是由一個用戶標記去區分的

<view class="news" bindtap='outbtn'> <view class="chat-notice" wx:if="{{userInfo}}">系統消息: 歡迎 {{ userInfo.nickName }} 加入群聊</view> <view class="historycon"> <scroll-view scroll-y="true" class="history" scroll-top="{{scrollTop}}"> <block wx:for="{{newslist}}" wx:key>     <!-- 歷史消息 --> <!-- <view class="chat-news"><view style="text-align: left;padding-left: 20rpx;"><image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image><text class="name">{{ item.nickName }}{{item.date}}</text></view><view class='you_left'><block wx:if="{{item.type=='text'}}"><view class='new_txt'>{{item.content}}</view></block><block wx:if="{{item.type=='image'}}"><image class="selectImg" src="{{item.images}}"></image></block></view></view> --> <view>{{item.date}}</view> <!--自己的消息 --> <view class="chat-news" wx:if="{{item.nickName == userInfo.nickName}}"> <view style="text-align: right;padding-right: 20rpx;"> <text class="name">{{ item.nickName }}</text> <image class='new_img' src="{{userInfo.avatarUrl}}"></image> </view> <view class='my_right'> <block wx:if="{{item.type=='text'}}"> <view class='new_txt'>{{item.content}}</view> </block> <block wx:if="{{item.type=='image'}}"> <image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image> </block> </view> </view> <!-- 別人的消息 --> <view class="chat-news" wx:else> <view style="text-align: left;padding-left: 20rpx;"> <image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image> <text class="name">{{ item.nickName }}</text> </view> <view class='you_left'> <block wx:if="{{item.type=='text'}}"> <view class='new_txt'>{{item.content}}</view> </block> <block wx:if="{{item.type=='image'}}"> <image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image> </block> </view> </view> </block> </scroll-view> </view> </view> <view id="flag"></view> <!-- 聊天輸入 --> <view class="message"> <form bindreset="cleanInput" class="sendMessage"> <input type="text" placeholder="請輸入聊天內容.." value="{{massage}}" bindinput='bindChange'></input> <view class="add" bindtap='increase'>+</view> <button type="primary" bindtap='send' formType="reset" size="small" button-hover="blue">發送</button> </form> <view class='increased {{aniStyle?"slideup":"slidedown"}}' wx:if="{{increase}}"> <view class="image" bindtap='chooseImage'>相冊 </view> </view> </view>