├── app.wxss ├── app.json ├── pages └── index │ ├── index.wxml │ ├── index.wxss │ └── index.js ├── utils ├── websocket.js └── util.js ├── app.js └── README.md /app.wxss: -------------------------------------------------------------------------------- 1 | /**app.wxss**/ 2 | .container { 3 | height: 100%; 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | justify-content: space-between; 8 | padding: 200rpx 0; 9 | box-sizing: border-box; 10 | } 11 | -------------------------------------------------------------------------------- /app.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages":[ 3 | "pages/index/index" 4 | ], 5 | "window":{ 6 | "backgroundTextStyle":"light", 7 | "navigationBarBackgroundColor": "#fff", 8 | "navigationBarTitleText": "小程序聊天室", 9 | "navigationBarTextStyle":"black" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /pages/index/index.wxml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | {{text}} 10 | 11 | -------------------------------------------------------------------------------- /utils/websocket.js: -------------------------------------------------------------------------------- 1 | var url = 'ws://121.42.51.70:8080/ws'; 2 | 3 | function connect (user, func) { 4 | 5 | wx.connectSocket({ 6 | url: url + '?username='+user.nickName 7 | }); 8 | 9 | wx.onSocketMessage(func); 10 | } 11 | 12 | 13 | function send (msg) { 14 | wx.sendSocketMessage({data:msg}); 15 | } 16 | module.exports = { 17 | connect: connect, 18 | send : send 19 | } 20 | -------------------------------------------------------------------------------- /utils/util.js: -------------------------------------------------------------------------------- 1 | function formatTime(date) { 2 | var year = date.getFullYear() 3 | var month = date.getMonth() + 1 4 | var day = date.getDate() 5 | 6 | var hour = date.getHours() 7 | var minute = date.getMinutes() 8 | var second = date.getSeconds() 9 | 10 | 11 | return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':') 12 | } 13 | 14 | function formatNumber(n) { 15 | n = n.toString() 16 | return n[1] ? n : '0' + n 17 | } 18 | 19 | module.exports = { 20 | formatTime: formatTime 21 | } 22 | -------------------------------------------------------------------------------- /pages/index/index.wxss: -------------------------------------------------------------------------------- 1 | /**index.wxss**/ 2 | .sendmessage { 3 | display: flex; 4 | flex-direction:row; 5 | border:1px solid #aaaaaa; 6 | } 7 | 8 | .sendmessage input { 9 | width:80%; 10 | height:40px; 11 | line-height : 40px ; 12 | font-size : 14px ; 13 | padding-left:10px; 14 | } 15 | .sendmessage button { 16 | border : 1px solid #ffffff ; 17 | width : 20% ; 18 | height : 40px ; 19 | background : #000000 ; 20 | color : #ffffff ; 21 | line-height : 40px ; 22 | font-size : 14px ; 23 | } 24 | .historycon { 25 | height: 90%;flex-direction:column;display:flex; 26 | border : 1px solid #aaaaaa ; 27 | border-top:0px; 28 | } 29 | .history{ 30 | height: 100%; 31 | margin-top:15px; 32 | margin:10px; 33 | font-size:14px; 34 | line-height:40px; 35 | word-break:break-all; 36 | 37 | 38 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | //app.js 2 | App({ 3 | onLaunch: function () { 4 | //调用API从本地缓存中获取数据 5 | var logs = wx.getStorageSync('logs') || [] 6 | logs.unshift(Date.now()) 7 | wx.setStorageSync('logs', logs) 8 | }, 9 | getUserInfo:function(cb){ 10 | var that = this 11 | if(this.globalData.userInfo){ 12 | typeof cb == "function" && cb(this.globalData.userInfo) 13 | }else{ 14 | //调用登录接口 15 | wx.login({ 16 | success: function () { 17 | wx.getUserInfo({ 18 | success: function (res) { 19 | that.globalData.userInfo = res.userInfo 20 | typeof cb == "function" && cb(that.globalData.userInfo) 21 | } 22 | }) 23 | } 24 | }) 25 | } 26 | }, 27 | globalData:{ 28 | userInfo:null 29 | } 30 | }) -------------------------------------------------------------------------------- /pages/index/index.js: -------------------------------------------------------------------------------- 1 | //index.js 2 | 3 | var websocket = require('../../utils/websocket.js'); 4 | 5 | 6 | //获取应用实例 7 | var app = getApp() 8 | 9 | var message = ''; 10 | 11 | var text = ''; 12 | 13 | var user = {}; 14 | 15 | Page({ 16 | data: { 17 | message : '', 18 | text : text 19 | }, 20 | bindChange: function(e) { 21 | message = e.detail.value 22 | }, 23 | //事件处理函数 24 | add: function(e) { 25 | websocket.send(user.nickName +" : "+ message); 26 | }, 27 | 28 | onLoad: function () { 29 | 30 | var that = this 31 | 32 | 33 | //调用应用实例的方法获取全局数据 34 | app.getUserInfo(function(userInfo){ 35 | user = userInfo; 36 | 37 | websocket.connect(user, function(res) { 38 | text = res.data +"\n" + text; 39 | that.setData({ 40 | text:text 41 | }); 42 | }) 43 | }) 44 | } 45 | }) 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # wechat-chat 2 | 3 | 本项目使用 [Gorilla WebSocket](https://github.com/gorilla/websocket) 作为聊天室后台 , Gorilla WebSocket 基于go语言开发，提供的demo实例中有聊天室源码，不需要任何修改就能生成一个聊天室项目(包含后台+web前台) 4 | 5 | demo: 6 | [http://121.42.51.70:8080](http://121.42.51.70:8080) 7 | 8 | 9 | ##一、聊天室服务搭建步骤: 10 | *如果不想搭建服务器，可以跳过这个步骤，直接使用我的服务* 11 | 12 | 1. 安装 [golang](https://golang.org/) , 安装1.6以上版本，低版本问题较多。*注:下载golang需要翻墙* 13 | 14 | 2. 安装Gorilla WebSocket模块 15 | ``` 16 | go get github.com/gorilla/websocket 17 | ``` 18 | 19 | 3. 启动聊天室 20 | ``` 21 | $ go get github.com/gorilla/websocket 22 | $ cd `go list -f '{{.Dir}}' github.com/gorilla/ websocket/examples/chat` 23 | $ go run *.go 24 | ``` 25 | 26 | 4. web客户端 27 | 访问:http://ip:8080 28 | 29 | 30 | ##二、微信小程序客户端 31 | 1. git clone https://github.com/ericzyh/wechat-chat.git 32 | 33 | 2. 使用[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html)导入项目 34 | 35 | 3. 修改服务地址 36 | wechat-chat/utils/websockets.js 行1 37 | 38 | 39 | ##三、小程序开发问题 （Q&A） 40 | 1. 如何通过js获取到某个组件? （发送消息后，清空输入框） 41 | A: 42 | 43 | 2. text存英文超过屏幕宽度后，会出现横向滚动条? 44 | A: 和css一样加上样式:```word-break:break-all;``` 45 | 46 | 3. 有没有办法在view里通过js动态加入view？ 47 | A: 48 | 49 | 50 | ##四、todo 51 | 1. 发送消息后，清空输入框 52 | 2. 名字可点击，实现1v1通讯 53 | 3. 加入聊天间 54 | 55 | 56 | --------------------------------------------------------------------------------