![\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/052\/5fc9f36929f80741.jpg\" "\\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe\\"")
<\/p>\n<\/p>\n
\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u544a\u4e00\u6bb5\u843d\uff0c\u603b\u7ed3\u4e00\u4e0b\u8fd9\u6bb5\u65f6\u95f4\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u9047\u5230\u7684\u95ee\u9898\u53ca\u89e3\u51b3\u65b9\u6848\uff0creact\u51b2\u51b2\u51b2\uff01\uff01\uff01<\/p>\n
\u5728wxss\u4e2d\uff0c\u5b9a\u4e49\u53d8\u91cf\uff1awidth\uff1avar(\u2013width\u2013);<\/p>\n
\u5728js\u4e2d\uff0c\u5b9a\u4e49\u53d8\u91cf\uff1aviewWidth\uff0c\u5e76\u7ed9\u8fd9\u4e2a\u53d8\u91cf\u8d4b\u4e88\u60f3\u8981\u7684\u503c<\/p>\n
\u5728wxml\u4e2d\uff0c\u4f7f\u7528wxss\u4e2d\u7684\u53d8\u91cf\u548cjs\u4e2d\u7684\u53d8\u91cf\uff1astyle=”\u2013width\u2013: { { viewWidth }}px”<\/p>\n
\u5728\u5b9e\u73b0\u76f4\u64ad\u7684\u529f\u80fd\u65f6\uff0c\u6211\u4eec\u9700\u8981\u5f39\u51fa\u7ea2\u5305\u7b49\u906e\u76d6video\u7684\u5904\u7406\uff0c\u6b64\u65f6\u4f1a\u53d1\u73b0\uff0c\u4f7f\u7528z-index\u5c5e\u6027\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u662f\u65e0\u6548\u7684\uff0c\u5fae\u4fe1\u5f00\u53d1\u8005\u6587\u6863\u63d0\u4f9b\u4e86cover-view\uff0ccover-imge\u7b49\u63a7\u4ef6\u5b9e\u73b0\u906e\u7f69\u7684\u529f\u80fd\u3002
\u8fd9\u91cc\u503c\u5f97\u6ce8\u610f\u7684\u662fcover-view\u4e2d\u7684background-image\u5c5e\u6027\u662f\u65e0\u6548\u7684\uff0c\u6240\u4ee5\u6211\u4eec\u8981\u5b89\u653e\u80cc\u666f\u56fe\u65f6\u9700\u8981\u4f7f\u7528\u5230cover-image\uff0c\u5e76\u4e14\u5c06\u5b83\u7684position\u8bbe\u7f6e\u4e3aabsolute\uff0c top\u4e3a0\uff0c left\u4e5f\u4e3a0\u5373\u53ef\u3002<\/p>\n
![\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe1\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/052\/2648db63d558ebd9355ca44781ff35b8-0.png\" "\\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe1\\"")
\u9996\u5148\u662f\u5c06\u8fd9\u4e2ascroll\u7684\u9ad8\u5ea6\u5b9a\u6b7b\uff0c\u8ba9scroll\u81ea\u52a8\u6ed1\u52a8\u5230\u67d0\u4e2aitem\u7684\u4f4d\u7f6e\uff1a<\/p>\n
<scroll-view class=\"danmu-list\" scroll-y=\"true\" scroll-into-view=\"{{'item_' + danmulist.length}}\" style=\"max-width:90%\">\n <view id=\"{{'item_' + (index + 1)}}\" wx:for=\"{{danmulist}}\" class=\"{{item.nickName == username ? 'danmu-item owner' : 'danmu-item'}}\" wx:key=\"this\">\n <view class=\"nickname\">{{item.nickName}}\uff1a<\/view>\n <view class=\"content {{ item.system ? 'system' : '' }}\" style=\"color: {{ item.system ? '#71f474' : (item.color || '#fff')}}\">{{item.content}}<\/view>\n <\/view>\n <\/scroll-view><\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u4e3ascroll\u6dfb\u52a0\u6837\u5f0f\uff1a<\/p>\n
.danmu-list {\n width: 750rpx;\n height: 290rpx;\n position: relative;\n padding-top: 27rpx;}.danmu-item {\n padding: 0 27rpx;}.danmu-item .nickname {\n color: #cdd5ff;\n font-size: 26rpx;\n display: inline-block;}.danmu-item.owner .nickname {\n color: #ffab00;}.danmu-item .content {\n color: #ffffff;\n font-size: 26rpx;\n display: inline-block;}<\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u53ef\u4ee5\u770b\u5230\u5728\u5c0f\u7a0b\u5e8f\u4e0a\u7684\u5b9e\u73b0\uff0c\u660e\u663e\u6bd4\u5728\u7f51\u9875\u4e0a\u8981\u7b80\u5355\uff0c\u6211\u4eec\u53ea\u9700\u8981\u4e00\u4e2ascroll-into-view\u7684\u5c5e\u6027\uff0c\u5e76\u4e14\u4e3a\u6bcf\u4e2aitem\u6dfb\u52a0\u4e00\u4e2aid\u5373\u53ef\u3002
\u90a3\u4e48\u6709\u6ca1\u6709\u7eafcss\u7684\u5b9e\u73b0\u5462\uff1f\u5f53\u7136\u3002
\u6211\u4eec\u5c06item\u90fd\u653e\u5728\u4e00\u4e2a\u76d2\u5b50\u4e2d\uff0c\u8ba9\u76d2\u5b50\u7684\u76f8\u5bf9\u4e8elist\u5e95\u90e8\u5bf9\u9f50\uff0coverflow\u5219\u8fdb\u884cscroll\uff0c\u8fd9\u6837\u540c\u6837\u80fd\u5b9e\u73b0\u73b0\u5728\u7684\u6548\u679c\u3002<\/p>\n
\u8f6f\u952e\u76d8\u95ee\u9898<\/h1>\n
\u6b64\u6b21\u5f00\u53d1\uff0c\u9700\u8981\u5b9e\u73b0\u4e00\u4e2a\u8f93\u5165\u6846\u70b9\u51fb\uff0c\u8f6f\u952e\u76d8\u5f39\u8d77\uff0c\u9009\u62e9\u989c\u8272\u529f\u80fd\u3002\u6211\u4eec\u770b\u4e0b\u6548\u679c\u56fe\uff1a
![\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe2\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/052\/2648db63d558ebd9355ca44781ff35b8-1.png\" "\\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe2\\"")
\u90a3\u4e48\u8003\u8651\u51e0\u4e2a\u95ee\u9898\uff1a
1\u3001\u9009\u62e9\u989c\u8272\u65f6\u952e\u76d8\u5931\u53bb\u7126\u70b9\u4f1a\u7f29\u8d77
\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u4e86\u4e00\u4e2ahold-keyboard\u5c5e\u6027
![\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe3\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/052\/0c61d019d2594be2137b5bf4d2235550-2.png\" "\\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe3\\"")
\u6211\u5728input \u4e2d\u8bbe\u5b9a\u4e86hold-keyboard=”true”
2\u3001\u8f6f\u952e\u76d8\u5f39\u51fa\u65f6\u4f1a\u81ea\u52a8\u628a\u9875\u9762\u4e0a\u63a8\uff0c\u4f46\u662f\u6211\u4eec\u4ec5\u4ec5\u60f3\u8981\u8f6f\u952e\u76d8\u628ainput\u6846\u4e0a\u63a8\u800c\u4e0d\u662f\u6574\u4e2a\u9875\u9762\u3002
\u5206\u6790\u4e00\u4e0b\u8fd9\u4e2a\u95ee\u9898\uff0c\u9996\u5148\u662f\u8003\u8651\u7eafcss\u89e3\u51b3\u65b9\u6848\uff0c\u628a\u9875\u9762\u8bbe\u4e3afixed\uff0c\u7136\u800c\u4e0d\u8d77\u4f5c\u7528\uff1b\u63a5\u4e0b\u6765\u8003\u8651\u9875\u9762\u5f39\u8d77\u65f6\u51cf\u53bb\u8f6f\u952e\u76d8\u7684\u9ad8\u5ea6\u8ba9\u5b83\u6062\u590d\u5230\u539f\u4f4d\uff0c\u8fd9\u4f1a\u5e26\u6765\u4e24\u4e2a\u95ee\u9898\uff1a1\uff09\u8f6f\u952e\u76d8\u5f39\u8d77\u540e\u624d\u80fd\u83b7\u53d6\u8f6f\u952e\u76d8\u9ad8\u5ea6\uff0c\u8fd9\u6837\u4e00\u6765\u9875\u9762\u7684\u4e0b\u843d\u4f1a\u4ea7\u751f\u4e25\u91cd\u7684\u6ede\u540e\uff1b2\uff09\u540c\u6837\u7684\u4e0d\u8d77\u4f5c\u7528
\u8fd9\u4e2a\u95ee\u9898\u6700\u7ec8\u7684\u89e3\u51b3\u65b9\u6848\u662f\u8fd9\u6837\u7684\uff1a
\u9996\u5148\u67e5\u770b\u5b98\u65b9\u6587\u6863\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u63d0\u4f9b\u4e86\u4e00\u4e2aadjust-position\u5c5e\u6027
![\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe4\"](\"https:\/\/img.php.cn\/upload\/article\/000\/000\/052\/0c61d019d2594be2137b5bf4d2235550-3.png\" "\\"\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u63d2\u56fe4\\"")
\u8bbe\u5b9aadjust-position=\u201cfalse”\uff0c\u6b64\u65f6\u7684\u786e\u4e0d\u4f1a\u8fdb\u884c\u9875\u9762\u7684\u4e0a\u63a8\u4e86\uff0c\u4f46\u662f\u6211\u4eec\u9700\u8981\u7684input\u6846\u4e0a\u63a8\u5982\u4f55\u5b9e\u73b0\uff1f
\u6211\u4eec\u53ef\u4ee5\u5728input\u7684\u65b9\u6cd5\u53c2\u6570e.detail.height\u4e2d\u62ff\u5230\u8f6f\u952e\u76d8\u7684\u9ad8\u5ea6\uff0c\u8bbe\u5b9ainput\u7684\u9ad8\u5ea6\u4e3ae.detail.height\u7684\u9ad8\u5ea6\u5373\u53ef\u3002
\u6700\u7ec8\u4ee3\u7801\uff1a<\/p>\n
<cover-view wx:if=\"{{inputParam.colorShow}}\" class=\"color-check\" style=\"max-width:90%\">\n <cover-image class=\"color-background\" src=\"{{assets}}\/images\/live-index-danmu-send-color-check.png\"><\/cover-image>\n <cover-view class=\"color-list\">\n <cover-view wx:for=\"{{colorStatusList}}\" wx:key=\"this\" catchtap=\"checkColor\" data-index=\"{{index}}\" class=\"{{item.checked == 0 ? 'color-icon' : 'color-icon with-border'}}\" style=\"background-color: {{item.color}}\"><\/cover-view>\n <\/cover-view>\n <\/cover-view>\n \n <view class=\"enterDanmu\" style=\"bottom: {{inputParam.bottom}}px\">\n\t <input hold-keyboard=\"true\" catchtap catchfocus=\"enterMessage\" bindconfirm=\"loseColor\" bindinput=\"getInputValue\" placeholder=\"\u53d1\u4e2a\u5f39\u5e55\u5457~\"\n\t placeholder-style=\"font-size: 26rpx; color: #09091b\" style=\"color:{{fontcolor}};\"\n\t value=\"{{inputParam.inpuentertValue}}\" focus=\"{{inputParam.focus}}\" adjust-position=\"{{false}}\"><\/input>\n <image catchtap=\"sendMessageOperation\" class=\"danmu-btn\" src=\"{{assets}}images\/live-index-danmu-send.png\"><\/image>\n <\/view><\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
checkColor(e) {\n let colorStatusList = this.data.colorStatusList;\n let index = e.currentTarget.dataset.index;\n let foncolor = colorStatusList[index].color;\n let inputParam = this.data.inputParam\n inputParam.focus = true\n if (colorStatusList[index].checked == true) {\n colorStatusList[index].checked = false\n foncolor = '#09091b'\n } else {\n for (let colorIndex in colorStatusList) {\n colorStatusList[colorIndex].checked = false\n }\n colorStatusList[index].checked = true\n }\n this.setData({\n colorStatusList: colorStatusList,\n fontcolor: foncolor,\n inputParam: inputParam })\n },\n\n getInputValue(e) {\n let inputParam = this.data.inputParam;\n inputParam.inputValue = e.detail.value;\n this.setData({\n inputParam: inputParam })\n },\n\n enterMessage(e) {\n let inputParam = this.data.inputParam;\n inputParam.colorShow = true,\n inputParam.focus = true,\n inputParam.bottom = e.detail.height this.setData({\n inputParam: inputParam,\n })\n },\n\n loseColor() {\n let inputParam = this.data.inputParam;\n inputParam.colorShow = false;\n inputParam.focus = false;\n inputParam.bottom = 0;\n this.setData({\n inputParam: inputParam,\n })\n },\n\n sendMessageOperation(e) {\n let inputParam = this.data.inputParam;\n if (inputParam.inputValue != '') {\n this.socket.emit('message', inputParam.inputValue, this.data.fontcolor);\n app.api.send_message(this.data.liveId, this.data.fontcolor, inputParam.inputValue);\n inputParam.inputValue = '';\n inputParam.colorShow = false\n inputParam.focus = false\n inputParam.bottom = 0\n this.setData({\n inputParam: inputParam,\n })\n console.log(\"sendMessageOperation\")\n } else {\n inputParam.inputValue = '';\n inputParam.colorShow = false\n inputParam.focus = false\n this.setData({\n inputParam: inputParam,\n })\n }\n\n }<\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u81f3\u4e8e\u8bf4\u4e0a\u9762\u7684catchtap\u5219\u5f88\u597d\u7406\u89e3\u4e86\uff0c\u5f53\u6211\u4eec\u8981\u70b9\u51fb\u4efb\u610f\u5904\u5bfc\u81f4\u5931\u53bb\u7126\u70b9\u65f6\uff0c\u5fc5\u5b9a\u8981\u5728\u5916\u5c42\u7ed1\u5b9abindtap\u4e8b\u4ef6\uff0c\u90a3\u4e48\u6b64\u5904\u5c31\u9700\u8981\u4f7f\u7528catchtap\u963b\u6b62\u4e8b\u4ef6\u7684\u5192\u6ce1\u3002
\u503c\u5f97\u4e00\u63d0\u7684\u662f\uff0c\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e5f\u63d0\u4f9b\u4e86\u4e00\u4e2awx.onKeyboardHeightChange(function callback)\u65b9\u6cd5\u6765\u76d1\u542c\u952e\u76d8\u7684\u9ad8\u5ea6\u53d8\u5316\uff0c\u4f46\u662f\u4eb2\u6d4b\u8fd9\u4e2a\u65b9\u6cd5\u5e76\u6ca1\u6709\u5f88\u597d\u7528\uff0c\u5c1d\u8bd5\u4e86\u4e00\u4e0b\u5c31\u5f03\u4e4b\u4e0d\u7528\u4e86\u3002<\/p>\n
websocket\u4f7f\u7528<\/h1>\n
\u6211\u4eec\u90fd\u77e5\u9053 HTTP \u534f\u8bae\u6709\u4e00\u4e2a\u7f3a\u9677\uff1a\u901a\u4fe1\u53ea\u80fd\u7531\u5ba2\u6237\u7aef\u53d1\u8d77\u3002\u90a3\u4e48\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u5982\u679c\u670d\u52a1\u5668\u6709\u8fde\u7eed\u7684\u72b6\u6001\u53d8\u5316\uff0c\u5ba2\u6237\u7aef\u8981\u83b7\u77e5\u5c31\u975e\u5e38\u9ebb\u70e6\u3002\u6211\u4eec\u53ea\u80fd\u4f7f\u7528”\u8f6e\u8be2”\uff0c\u6700\u5178\u578b\u7684\u5e94\u7528\u573a\u666f\u5c31\u662f\u804a\u5929\u5ba4\u4e86\u3002
\u8f6e\u8be2\u7684\u6548\u7387\u4f4e\uff0c\u975e\u5e38\u6d6a\u8d39\u8d44\u6e90\u3002\u56e0\u6b64\uff0c\u5de5\u7a0b\u5e08\u4eec\u4e00\u76f4\u5728\u601d\u8003\uff0c\u6709\u6ca1\u6709\u66f4\u597d\u7684\u65b9\u6cd5\u3002WebSocket \u5c31\u662f\u8fd9\u6837\u53d1\u660e\u7684\u3002
\u90a3\u4e48\u5982\u4f55\u5728\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u4e2d\u4f7f\u7528websocket\u5462\uff1f\u5148\u6765\u770b\u770b\u672c\u6b21\u7684\u9700\u6c42\uff1a
\u5728\u89c2\u770b\u76f4\u64ad\u7684\u8fc7\u7a0b\u5f53\u4e2d\uff0c\u7528\u6237\u4f1a\u8fdb\u884c\u804a\u5929\uff0c\u670d\u52a1\u5668\u8981\u5c06\u7528\u6237\u7684\u5f39\u5e55\u4fe1\u606f\u63a8\u9001\u5230\u6bcf\u4e2a\u7528\u6237\u7684\u624b\u673a\u7aef\u3002<\/p>\n
weapp.socket.io<\/h2>\n
weapp.socket.io\u662f\u57fa\u4e8esocket.io\u7684\u5fae\u4fe1\u7a0b\u5e8f\u73af\u5883\u4e2d\u7684\u5ba2\u6237\u7aef\uff0c\u4ee5\u53casocket.io-client\u6d4f\u89c8\u5668\u7248\u672c\u7684\u5b8c\u6574\u529f\u80fd\u3002
\u5b89\u88c5\u65b9\u5f0f\uff1a<\/p>\n
npm i weapp.socket.io<\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u7b80\u5355\u4f7f\u7528\u7684\u4ee3\u7801\uff1a<\/p>\n
<template>\n <view class=\"content\">\n <button type=\"primary\" @click=\"send\">\u53d1\u9001\u6d88\u606f<\/button>\n <\/view><\/template><\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\/\/ \u5f15\u5165 weapp.socket.io.js import io from '@\/util\/weapp.socket.io.js';export default {\n data() {\n return {};\n },\n onLoad() {\n \/\/ \u5efa\u7acb\u4e00\u4e2asocket\u8fde\u63a5\n const socket =(this.socket = io('https:\/\/socket-io-chat.now.sh\/'));\n\n \/**\n * \u5ba2\u6237\u7aefsocket.on()\u76d1\u542c\u7684\u4e8b\u4ef6\uff1a\n *\/\n\n \/\/ \u8fde\u63a5\u6210\u529f\n socket.on('connect', () => {\n console.log('\u8fde\u63a5\u6210\u529f');\n });\n \/\/ \u6b63\u5728\u8fde\u63a5\n socket.on('connecting', d => {\n console.log('\u6b63\u5728\u8fde\u63a5', d);\n });\n \/\/ \u8fde\u63a5\u9519\u8bef\n socket.on('connect_error', d => {\n console.log('\u8fde\u63a5\u5931\u8d25', d);\n });\n \/\/ \u8fde\u63a5\u8d85\u65f6\n socket.on('connect_timeout', d => {\n console.log('\u8fde\u63a5\u8d85\u65f6', d);\n });\n \/\/ \u65ad\u5f00\u8fde\u63a5\n socket.on('disconnect', reason => {\n console.log('\u65ad\u5f00\u8fde\u63a5', reason);\n });\n \/\/ \u91cd\u65b0\u8fde\u63a5\n socket.on('reconnect', attemptNumber => {\n console.log('\u6210\u529f\u91cd\u8fde', attemptNumber);\n });\n \/\/ \u8fde\u63a5\u5931\u8d25\n socket.on('reconnect_failed', () => {\n console.log('\u91cd\u8fde\u5931\u8d25');\n });\n \/\/ \u5c1d\u8bd5\u91cd\u65b0\u8fde\u63a5\n socket.on('reconnect_attempt', () => {\n console.log('\u5c1d\u8bd5\u91cd\u65b0\u91cd\u8fde');\n });\n \/\/ \u9519\u8bef\u53d1\u751f\uff0c\u5e76\u4e14\u65e0\u6cd5\u88ab\u5176\u4ed6\u4e8b\u4ef6\u7c7b\u578b\u6240\u5904\u7406\n socket.on('error', err => {\n console.log('\u9519\u8bef\u53d1\u751f\uff0c\u5e76\u4e14\u65e0\u6cd5\u88ab\u5176\u4ed6\u4e8b\u4ef6\u7c7b\u578b\u6240\u5904\u7406', err);\n });\n \/\/ \u52a0\u5165\u804a\u5929\u5ba4\n socket.on('login', d => {\n console.log(`\u60a8\u5df2\u52a0\u5165\u804a\u5929\u5ba4\uff0c\u5f53\u524d\u5171\u6709 ${d.numUsers} \u4eba`);\n });\n \/\/ \u63a5\u53d7\u5230\u65b0\u6d88\u606f\n socket.on('new message', d => {\n console.log('new message',d);\n\n });\n \/\/ \u6709\u4eba\u52a0\u5165\u804a\u5929\u5ba4\n socket.on('user joined', d => {\n console.log(`${d.username} \u6765\u4e86\uff0c\u5f53\u524d\u5171\u6709 ${d.numUsers} \u4eba`);\n\n });\n \/\/ \u6709\u4eba\u79bb\u5f00\u804a\u5929\u5ba4\n socket.on('user left', d => {\n console.log(`${d.username} \u79bb\u5f00\u4e86\uff0c\u5f53\u524d\u5171\u6709 ${d.numUsers} \u4eba`);\n });\n },\n methods: {\n send(){\n \/\/ \u53d1\u9001\u6d88\u606f\n this.socket.emit('new message', '\u53d1\u9001\u6d88\u606f') \n }\n }};<\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u5c0f\u7a0b\u5e8f\u5f53\u4e2d\u7684\u4f7f\u7528<\/h2>\n initWebSocket(live) {\n if(this.socket) {\n this.socket.disconnect();\n this.socket = null;\n }\n if(live.step != '\u76f4\u64ad\u4e2d') {\n return this.setData({ liveTipTime: live.start_time });\n }\n const username = this.data.username;\n const timestamp = Math.floor(Date.now()\/1000\/60\/10);\n const token = `gz.${timestamp}.${username}`;\n const socket = io( `${socketHost}\/chat?id=${this.data.liveId}&token=${token}`);\n socket.on('connect', () => {\n this.setData({ socketError: '' });\n console.log('connection created.')\n });\n socket.on('join', user => {\n let { danmulist } = this.data;\n danmulist.push({ nickName: user, content: '\u52a0\u5165\u4e86\u623f\u95f4', system: true });\n this.setData({ danmulist, onlineUserCount: this.data.onlineUserCount + 1 });\n });\n socket.on('message', msg => {\n let { danmulist } = this.data;\n danmulist.push({ nickName: msg.user, content: msg.content, color: msg.color || '#fff' });\n this.videoContext.sendDanmu({ text: msg.content, color: msg.color || '#fff' })\n this.setData({ danmulist });\n console.log(msg)\n });\n socket.on('alluser', users => {\n \/\/console.log('alluser', users);\n this.setData({ onlineUserCount: users.length });\n });\n socket.on('logout', users => {\n console.log('alluser', users)\n this.setData({ onlineUserCount: this.data.onlineUserCount - 1 });\n });\n socket.on('getAlluser', ({ type, users }) => {\n console.log('getAlluser', type, users);\n if(this.data.isAdmin) {\n app.api.lottery_start(type, users).then(x=>{\n if(!x.length) {\n return wx.showModal({ content: '\u5f53\u524d\u5df2\u65e0\u7b26\u5408\u6761\u4ef6\u7684\u4e2d\u5956\u5019\u9009\u540d\u5355\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5' });\n }\n wx.showToast({ title: '\u62bd\u5956\u6210\u529f' });\n this.setData({ activeTab: 0 });\n this.socket.emit('lotteryStart', type);\n this.lottery_result_summary();\n }).catch(e=>{\n wx.showModal({ title: '\u62bd\u5956\u5931\u8d25: '+e, showCancel: false });\n });\n }\n });\n socket.on('setScore', score => {\n const liveIndex = this.data.swiperList.findIndex(x=>x.id == this.data.liveId);\n if(this.data.swiperList[liveIndex]) {\n this.setData({ [`swiperList[${liveIndex}].score`]: score });\n }\n console.log('setScore', score)\n });\n socket.on('lotteryStart', type => {\n console.log('lotteryStart', type)\n if(this.data.lotteryStatus == 1) {\n app.api.lottery_result(type).then(lotteryResult=>{\n this.setData({ lotteryStatus: 2, lotteryResult, time2: 10 });\n this.countdown();\n });\n }\n });\n socket.on('setliveStep', step => {\n console.log('setliveStep', step)\n });\n socket.on('error', e => {\n console.error('socket error', e);\n wx.showToast({ title: '\u8fde\u63a5\u5f39\u5e55\u670d\u52a1\u5931\u8d25', icon: 'none' });\n this.setData({ socketError: e + '' });\n })\n this.socket = socket;\n this.setData({ liveTipTime: '' });\n },<\/pre>\n \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\n \u60f3\u4e86\u89e3\u66f4\u591a\u7f16\u7a0b\u5b66\u4e60\uff0c\u656c\u8bf7\u5173\u6ce8php\u57f9\u8bad\u680f\u76ee\uff01\n<\/p><\/blockquote>\n
\u4ee5\u4e0a\u5c31\u662f\u6c47\u603b\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u680f\u76ee\u4ecb\u7ecd\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u7684\u4e00\u4e9b\u95ee\u9898 \u63a8\u8350\uff08\u514d\u8d39\uff09\uff1a \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u95ee\u9898\u6c47\u603b \u6837\u5f0f\u5982\u4f55\u4f7f\u7528\u53d8\u91cf video\u906e\u7f69\u95ee\u9898 \u5f39\u5e55\u81ea\u52a8\u4e0a\u63a8\u4fe1\u606f\u6d41 \u8f6f\u952e\u76d8\u95ee\u9898 websocket\u4f7f\u7528 weapp.socket.io \u5c0f\u7a0b\u5e8f\u5f53\u4e2d\u7684\u4f7f\u7528 \u5c0f\u7a0b\u5e8f\u5f00\u53d1\u544a\u4e00\u6bb5\u843d\uff0c\u603b\u7ed3\u4e00\u4e0b\u8fd9\u6bb5\u65f6\u95f4\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u9047\u5230\u7684\u95ee\u9898\u53ca\u89e3\u51b3\u65b9\u6848\uff0creact\u51b2\u51b2\u51b2\uff01\uff01\uff01 \u6837\u5f0f\u5982\u4f55\u4f7f\u7528\u53d8\u91cf \u5728wxss\u4e2d\uff0c\u5b9a\u4e49\u53d8\u91cf\uff1awidth\uff1avar(\u2013width\u2013); \u5728js\u4e2d\uff0c\u5b9a\u4e49\u53d8\u91cf\uff1aviewWidth\uff0c\u5e76\u7ed9\u8fd9\u4e2a\u53d8\u91cf\u8d4b\u4e88\u60f3\u8981\u7684\u503c \u5728wxml\u4e2d\uff0c\u4f7f\u7528wxss\u4e2d\u7684\u53d8\u91cf\u548cjs\u4e2d\u7684\u53d8\u91cf\uff1astyle=”\u2013width\u2013: { { viewWidth }}px” video\u906e\u7f69\u95ee\u9898 \u5728\u5b9e\u73b0\u76f4\u64ad\u7684\u529f\u80fd\u65f6\uff0c\u6211\u4eec\u9700\u8981\u5f39\u51fa\u7ea2\u5305\u7b49\u906e\u76d6video\u7684\u5904\u7406\uff0c\u6b64\u65f6\u4f1a\u53d1\u73b0\uff0c\u4f7f\u7528z-index\u5c5e\u6027\u5728\u5c0f\u7a0b\u5e8f\u4e2d\u662f\u65e0\u6548\u7684\uff0c\u5fae\u4fe1\u5f00\u53d1\u8005\u6587\u6863\u63d0\u4f9b\u4e86cover-view\uff0ccover-imge\u7b49\u63a7\u4ef6\u5b9e\u73b0\u906e\u7f69\u7684\u529f\u80fd\u3002 \u8fd9\u91cc\u503c\u5f97\u6ce8\u610f\u7684\u662fcover-view\u4e2d\u7684background-image\u5c5e\u6027\u662f\u65e0\u6548\u7684\uff0c\u6240\u4ee5\u6211\u4eec\u8981\u5b89\u653e\u80cc\u666f\u56fe\u65f6\u9700\u8981\u4f7f\u7528\u5230cover-image\uff0c\u5e76\u4e14\u5c06\u5b83\u7684position\u8bbe\u7f6e\u4e3aabsolute\uff0c top\u4e3a0\uff0c left\u4e5f\u4e3a0\u5373\u53ef\u3002 \u5f39\u5e55\u81ea\u52a8\u4e0a\u63a8\u4fe1\u606f\u6d41 \u9996\u5148\u662f\u5c06\u8fd9\u4e2ascroll\u7684\u9ad8\u5ea6\u5b9a\u6b7b\uff0c\u8ba9scroll\u81ea\u52a8\u6ed1\u52a8\u5230\u67d0\u4e2aitem\u7684\u4f4d\u7f6e\uff1a <scroll-view class=”danmu-list” scroll-y=”true” scroll-into-view=”{{‘item_’ + danmulist.length}}” style=”max-width:90%”> <view id=”{{‘item_’ + (index + 1)}}” wx:for=”{{danmulist}}” class=”{{item.nickName == username ? ‘danmu-item owner’ : ‘danmu-item’}}” wx:key=”this”> <view class=”nickname”>{{item.nickName}}\uff1a<\/view> <view class=”content {{ item.system […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-33723","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33723","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=33723"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33723\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=33723"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=33723"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=33723"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}