han_cui入门实战《三》聊天室，基于Gorilla WebSocket
本项目使用Gorilla WebSocket作为聊天室后台 , Gorilla WebSocket 基于Go语言开发，提供的demo实例中有聊天室源码，不需要任何修改就能生成一个聊天室项目(包含后台+web前台)一、聊天室 …
本项目使用 Gorilla WebSocket 作为聊天室后台 , Gorilla WebSocket 基于Go语言开发，提供的demo实例中有聊天室源码，不需要任何修改就能生成一个聊天室项目(包含后台+web前台)
一、聊天室服务搭建步骤:
如果不想搭建服务器，可以跳过这个步骤，直接使用我的服务
1：安装 golang , 安装1.6以上版本，低版本问题较多。注:下载golang需要翻墙
安装Gorilla WebSocket模块
-
go get github.com/gorilla/websocket
启动聊天室
-
$ go get github.com/gorilla/websocket -
$ cd `go list -f '{{.Dir}}' github.com/gorilla/ websocket/examples/chat` -
$ go run *.go
3：web客户端
-
访问:http://ip:8080
二、微信小程序客户端
1：将文件正确导入开发者工具目录。注意，websockets.js 文件地址。服务器域名，端口号，如：url: http://121.42.51.70:8080 Git clone https://github.com/ericzyh/wechat-chat.git
2：使用微信web开发者工具导入项目
3：修改服务地址 wechat-chat/utils/websockets.js 行1
三、小程序开发问题 （Q&A）
如何通过js获取到某个组件? （发送消息后，清空输入框） A:
text存英文超过屏幕宽度后，会出现横向滚动条? A: 和css一样加上样式:word-break:break-all;
四、todo
1：发送消息后，清空输入框 2：名字可点击，实现1v1通讯 3：加入聊天间
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
模板条件列表渲染完成模拟公众号自动回复
先看下效果
(此图片来源于网络，如有侵权，请联系删除! )
话不多说 直接上代码 1.页面代码：
-
<swiper indicator-dots="{{indicatorDots}}" -
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> -
<block wx:for="{{imgUrls}}"> -
<swiper-item> -
<navigator url="{{item.link}}" hover-class="navigator-hover"> -
<image src="{{item.url}}" class="slide-image" width="355" height="150"/> -
</navigator> -
</swiper-item> -
</block> -
</swiper> -
<block> -
<input type="text" class="input-text" bindchange="setInputValue" placeholder="请输入你要咨询的内容"/> -
<button bindtap="getgetinputSEnd" class="input-button">发送</button> -
</block> -
<view class="chat-area"> -
<view wx:for="{{msgs}}" wx:for-index="idx" wx:for-item="itemName"> -
<view class="say-title"> -
<block wx:if="{{idx%2 != 0}}"><text class="red-font">客服：</text></block> -
<block wx:if="{{idx%2 == 0}}"><text class="green-font">你：</text></block> -
</view> -
<view class="say-content"> -
<block wx:if="{{itemName.type == 'video'}}"> -
<video src="{{itemName.msg}}"></video> -
</block> -
<block wx:if="{{itemName.type == 'voice'}}"> -
<audio src="{{itemName.msg}}" controls loop></audio> -
</block> -
<block wx:if="{{itemName.type == 'image'}}"> -
<image src="{{itemName.msg}}"></image> -
</block> -
<block wx:if="{{itemName.type == 'text'}}"> -
<text>{{itemName.msg}}</text> -
</block> -
</view> -
</view> -
</view>
页面中 使用了 模板的
条件渲染 ：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=1476197490824 列表渲染：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/conditional.html?t=1476197492981
2. 样式代码
-
.slide-image{ -
width: 100%; -
} -
.input-text{ -
border:1px solid #abcdef; -
width:88%; -
background:#ddd; -
line-height:100%; -
text-indent: 0.5rem; -
margin:1rem auto; -
height:40px; -
} -
.input-button{ -
background:#48C23D; -
margin:0.5rem 5%; -
color:#fff; -
} -
.chat-area{ -
width: 90%; -
margin
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » han_cui入门实战《三》聊天室，基于Gorilla WebSocket
