2017-07-26

作品

2 分钟读完 (大约 262 个字)

多房间聊天室

演示

新窗口打开

源码

github

Doc

中文 English

多房间聊天室

多房间聊天室，首次进入需要创建个昵称（关闭浏览器会清除昵称），之后可以选择创建一个房间，或者加入一个房间，
加入房间需要输入房间号。

使用工具

socket.io
react及周边

使用

启动服务器

1	cd server && yarn start

websocket 服务端口在 3333

启动客户端（开发版本）

1	cd client && yarn run dev

客户端在端口9900

构建客户端

1	cd client && yarn run build

构建后的目录在 client/dist下

chat-room

Multi-room chat room, you should enter nickname at the first time when you use this project,
and nickname will be cleared if close the browser. After enter nickname, you can choose create
a room or join a room. Room number is needed when join a room.

Build by

socket.io
react,redux,react-redux,react-router

Usage

run server

1	cd server && yarn start

websocket port on 3333

run client（development version）

1	cd client && yarn run dev

client port on 9900

build client

1	cd client && yarn run build

LICENSE

MIT

2016-08-30

作品

2 分钟读完 (大约 364 个字)

利用手机姿态使用websocket控制客户端css长方体姿态

前言

我之前有篇文章写了利用deviceorientation事件获取手机姿态。既然可以获取手机在三位空间内的与坐标轴角度，也就可以通过这来控制网页中css长方体的姿态。至于在两个网页/客户端传输数据，当然是用websocket最好了。这里刚好我之前做过两个小demo关于这个。

思路

这个 Demo 分为客户端，控制端和服务端。客户端是一个用css3写的三维的长方体，只接受websocket数据。

2016-08-19

作品

5 分钟读完 (大约 751 个字)

使用websocket 的ws库构建聊天室

更新

现在开发了新版本多房间聊天室

websocket

html5 新api，用于实现持久化连接，且不收跨域影响。通过HTTP 的Updrade头来升级协议。

使用方法

//创建实例
var socket=new WebSocket("ws://localhost:xxxx");
//发送数据
socket.send("hello world");
//接受数据
socket.onmessage=function(event){
	console.log(event.data)
}
//初始化事件
socket.onopen=function(){}
//关闭事件
socket.onclose=function(){}
//关闭连接
socket.close()

服务端

服务端这篇文章我使用了 ws 这个库。

1	npm install ws --save

Demo

新窗口打开
~~服务端随时可能关闭，仅供测试。~~ 已关闭

tips

这里我使用了 vw vh 来做屏幕适配，之后我的博客会有专门文章来写这个

Demo 问题

多房间聊天室

演示

源码

Doc

多房间聊天室

使用工具

使用

chat-room

Build by

Usage

LICENSE

利用手机姿态使用websocket控制客户端css长方体姿态

前言

思路

使用websocket 的ws库构建聊天室

更新

websocket

使用方法

服务端

Demo

tips

Demo 问题

友链

分类

标签云

最新文章

归档

标签

最新文章

归档

标签

Your browser is out-of-date!