微信小程序websocket实现即时聊天

我会带着你远行 2022-04-13 09:10 837阅读 0赞

今天给大家分享一下本人做小程序使用websocket的一点小经验，希望对大家有所帮助。

使用之前肯定首先要了解一下websocket是什么，简单来讲websocket就是客户端与服务器之间专门建立的一条特殊通道，请求只需要请求一次，而且还可以从通道实时获取服务器数据，非常适合应用到实时应用上。

因为这里本人是分享小程序，所以就不去深究websocket的底层和协议了，感兴趣的朋友可以去看下[websocket协议][websocket]

建议大家在做之前先看看微信小程序官方提供的api关于[websocket的文档][websocket 1]，因为微信的websocket接口虽然和HTML5的websocket基本一样但是语法上还是有少许偏差，了解一下还是很有必要的。

话不多说上代码（css代码就不贴了，就是一些简单的聊天样式排版）

wxml

<view>
     <scroll-view scroll-y="true" scroll-with-animation="true" scroll-x="false" scroll-into-view="list-{
       {idx}}" class="twnav">
            <view class='twChild'>
            
            <view class='tellRoom'  wx:for="{
       {tellData}}" wx:for-index="idx" wx:for-item="li" wx:key="li" id='list-{
       {li.id}}'>
              <view class='myHead'>
                <image class='sayHead' wx-if='{
       {li.type=="question"||li.type=="message"}}' src='{
       {li.avatarurl}}'></image>
                <image class='sayHead' wx-if='{
       {li.type=="answer"}}' src='{
       {li.content.orgLogo}}'></image>
              </view>
              <view class='tellDetail'>
                  <text class='name' wx-if='{
       {li.type=="question"||li.type=="message"}}'>{
       {li.displayName}}:</text>
                  <text class='name' wx-if='{
       {li.type=="answer"}}'>{
       {li.content.orgName}}回复{
       {li.displayName}}:</text>
                  <view wx-if='{
       {li.type=="answer"}}' class='answer'>
                    <view class='anQue'>{
       {li.content.question}}</view>
                    <view class='anAn'>{
       {li.content.answer}}</view>
                  </view>
                  <image wx-if='{
       {li.type=="question"}}' class='question' src='../../image/icon_quiz@2x.png' mode='widthFix'></image>
                  <text class='sayDetail' wx-if='{
       {li.type=="question"}}'>{
       {li.content.content}}</text>
                  <text class='sayDetail' wx-if='{
       {li.type=="message"}}'>{
       {li.content}}</text>
              </view>
            </view>
            <view class='ccds'></view>
            </view>
      </scroll-view>
          
          <view class='btn' wx-if='{
       {tell==true&&promodal==false}}'>
              <form bindreset="foo">
                <input class="myinput"  placeholder="说点什么吧" bindinput="sayValue" focus='{
       {myinputing}}'/>
                <button form-type="reset" class='sub' wx-if='{
       {isSend=="send"||isSend=="sureAsk"}}'  bindtap='sendMes'>发送</button>
                <button form-type="reset" class='sub' wx-if='{
       {isSend=="ask"}}' bindtap='ask'>问</button>
              </form>
            </view>
       </view>

以上仅是前端部分本人小程序websocket的使用实例，具体的情况需要配合自己的服务端。希望对大家有所帮助，也欢迎大家互相讨论。

[websocket]: https://www.jianshu.com/p/867274a5e054
[websocket 1]: https://developers.weixin.qq.com/miniprogram/dev/api/network-socket.html?search-key=websocket